/* ===========================
   SCHEDMATE — CALENDAR CSS (FULL UPDATED)
   Option 1: Day Modal Polish ✅
=========================== */

.sm-cal { padding: 22px; }

.sm-cal-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.sm-cal-title h2{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.sm-cal-title p{ margin:4px 0 0; opacity:.7; font-size:13px; }

.sm-cal-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.sm-cal-nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.sm-cal-month{
  min-width:160px;
  text-align:center;
  font-weight:800;
  letter-spacing:-.01em;
}

.sm-cal-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin:12px 0 8px;
  color:rgba(0,0,0,.55);
  font-size:12px;
  font-weight:700;
}
.sm-cal-weekdays > div{
  padding:8px 10px;
}

.sm-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.sm-cal-cell{
  text-align:left;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:10px;
  min-height:92px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.sm-cal-cell:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.sm-cal-cell:active{
  transform:translateY(0px) scale(.995);
}
.sm-cal-cell.is-out{
  opacity:.45;
}
.sm-cal-cell.is-today{
  outline:2px solid rgba(30,136,255,.25);
  background:rgba(210,236,255,.42);
}

.sm-cal-daynum{
  font-weight:900;
  font-size:14px;
  margin-bottom:8px;
}

.sm-cal-items{ display:flex; flex-direction:column; gap:6px; }

.sm-cal-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.75);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sm-cal-chip:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.sm-cal-chip-dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(30,136,255,.8);
  flex:0 0 auto;

  /* Option 1 polish: obvious clickable dot */
  cursor:pointer;
  box-shadow: 0 0 0 0 rgba(30,136,255,.0);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.sm-cal-chip-dot:hover{
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(30,136,255,.10);
  opacity: .95;
}

.sm-cal-chip-txt{
  overflow:hidden;
  text-overflow:ellipsis;
}

.sm-cal-chip-pending .sm-cal-chip-dot{ background: rgba(255,193,7,.95); }
.sm-cal-chip-in\ progress .sm-cal-chip-dot{ background: rgba(30,136,255,.95); } /* legacy safety */
.sm-cal-chip-in_progress .sm-cal-chip-dot{ background: rgba(30,136,255,.95); }
.sm-cal-chip-completed .sm-cal-chip-dot{ background: rgba(40,167,69,.95); }
.sm-cal-chip-cancelled .sm-cal-chip-dot{ background: rgba(220,53,69,.95); }

.sm-cal-more{
  font-size:12px;
  opacity:.7;
  font-weight:700;
  padding-left:4px;
}

.sm-cal-empty{
  padding:14px;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:12px;
  background:rgba(255,255,255,.6);
  font-weight:700;
  opacity:.75;
}

/* ======================================
   DAY MODAL — POLISH (Option 1 ✅)
====================================== */

/* container */
.sm-cal-daytable{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* base row */
.sm-cal-dayrow{
  display:grid;
  grid-template-columns: 110px 1.2fr 1.2fr 120px 120px;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.80);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  align-items:center;
}

/* header row */
.sm-cal-dayhead{
  font-weight:900;
  opacity:.75;
  background:rgba(245,247,250,.90);
  border-color: rgba(0,0,0,.05);
}

/* clickable rows inside modal (your JS uses button.sm-cal-dayrow-btn) */
.sm-cal-dayrow-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  border:none;            /* we already have border on .sm-cal-dayrow */
}

/* hover/active states (investor-ready feel) */
.sm-cal-dayrow-btn:hover{
  background: rgba(235, 245, 255, .85);
  border-color: rgba(30,136,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.sm-cal-dayrow-btn:active{
  transform: translateY(0px) scale(.995);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* keyboard focus */
.sm-cal-dayrow-btn:focus{
  outline:none;
}
.sm-cal-dayrow-btn:focus-visible{
  outline:2px solid rgba(30,136,255,.25);
  outline-offset:2px;
}

/* right align helper */
.sm-cal-dayrow .is-right{ text-align:right; }

/* badge */
.sm-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.86);
}

.sm-badge-pending{ background: rgba(255,193,7,.18); }
.sm-badge-in\ progress{ background: rgba(30,136,255,.16); } /* legacy safety */
.sm-badge-in_progress{ background: rgba(30,136,255,.16); }
.sm-badge-completed{ background: rgba(40,167,69,.16); }
.sm-badge-cancelled{ background: rgba(220,53,69,.14); }

/* subtle helper text */
.sm-muted{
  opacity:.7;
}

/* ======================================
   RESPONSIVE (modal table)
====================================== */

@media (max-width: 980px){
  .sm-cal-dayrow{
    grid-template-columns: 90px 1fr 1fr;
    grid-auto-rows:auto;
  }
  .sm-cal-dayrow > div:nth-child(4),
  .sm-cal-dayrow > div:nth-child(5){
    display:none;
  }
}

/* ======================================
   DRAG & DROP UX
====================================== */

.sm-cal-cell.is-drop-target {
  outline: 2px dashed var(--accent, var(--sm-primary));
  outline-offset: -3px;
  background: rgba(79, 70, 229, 0.08);
}

.sm-cal-chip.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  cursor: grabbing;
}

/* =========================================================
   CALENDAR UPGRADE v2.3 — GRID + CHIPS + DAY MODAL
   (Design System aligned • CSS-only • Safe)
========================================================= */

/* ---------- Month Grid Cards ---------- */
.sm-cal-cell{
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  box-shadow: var(--sm-shadow2);
  min-height: 108px;
  padding: 12px;
}
.sm-cal-cell:hover{
  background: var(--sm-surface-2);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.sm-cal-cell.is-out{
  opacity: .42;
}
.sm-cal-cell.is-today{
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(91,92,255,.55),
    0 18px 50px rgba(91,92,255,.18);
  background: linear-gradient(180deg, rgba(91,92,255,.14), rgba(34,211,238,.06));
}

/* Optional selected state (if JS adds .is-selected later) */
.sm-cal-cell.is-selected{
  box-shadow:
    inset 0 0 0 2px rgba(34,211,238,.55),
    0 18px 50px rgba(34,211,238,.18);
  background: linear-gradient(180deg, rgba(34,211,238,.14), rgba(91,92,255,.06));
}

/* ---------- Booking Chips v2 ---------- */
.sm-cal-chip{
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 900;
  border-radius: 999px;
  border: 1px solid var(--sm-border);
  background: var(--sm-control);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.sm-cal-chip:active{
  transform: translateY(0px) scale(.995);
}

/* Dot inside chip */
.sm-cal-chip-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.8);
  box-shadow: 0 0 0 3px rgba(148,163,184,.18);
}

/* Status colors (soft, readable) */
.sm-cal-chip-pending{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
}
.sm-cal-chip-pending .sm-cal-chip-dot{
  background: rgba(245,158,11,.95);
  box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}

.sm-cal-chip-in_progress{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
}
.sm-cal-chip-in_progress .sm-cal-chip-dot{
  background: rgba(59,130,246,.95);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.sm-cal-chip-completed{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.30);
}
.sm-cal-chip-completed .sm-cal-chip-dot{
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

.sm-cal-chip-cancelled{
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.26);
  opacity: .85;
  text-decoration: line-through;
}
.sm-cal-chip-cancelled .sm-cal-chip-dot{
  background: rgba(148,163,184,.95);
  box-shadow: 0 0 0 3px rgba(148,163,184,.16);
}

/* "+X more" pill */
.sm-cal-more{
  background: var(--sm-surface-2);
  border: 1px solid var(--sm-border);
  color: var(--sm-muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
}

/* ---------- Day Modal: make it bigger & readable ---------- */
#smCalDayModal .sm-modal-card{
  width: min(880px, 96vw);
  max-height: min(86vh, 900px);
}
#smCalDayModal .sm-modal-head{
  padding: 16px 18px;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-surface);
}
#smCalDayModal .sm-modal-title{
  font-size: 16px;
  font-weight: 1000;
}
#smCalDayModal .sm-modal-body{
  padding: 16px 18px;
}

/* Day table */
.sm-cal-daytable{
  gap: 12px;
}

/* Header row inside modal */
.sm-cal-dayhead{
  opacity: 1;
  font-weight: 1000;
  color: var(--sm-muted);
  background: var(--sm-surface-2);
  border-color: var(--sm-border);
}

/* Rows inside day modal */
.sm-cal-dayrow{
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  padding: 12px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.sm-cal-dayrow-btn:hover{
  background: var(--sm-surface-2);
  border-color: rgba(91,92,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* Make columns breathe on small screens */
@media (max-width: 860px){
  .sm-cal-dayrow{
    grid-template-columns: 92px 1fr;
    grid-auto-rows: auto;
    row-gap: 6px;
  }
  .sm-cal-dayhead{
    display: none; /* on mobile: header row removed to reduce clutter */
  }
}

/* Day modal footer actions */
#smCalDayModal .sm-modal-actions{
  background: var(--sm-surface);
  border-top: 1px solid var(--sm-border);
  padding: 14px 18px;
}
/* ============================================================
   CALENDAR — DAY MODAL (UPGRADE v2)
   Fix: price cut-off + no header label + unreadable status
============================================================ */

/* Wider modal only for day modal */
#smCalDayModal .sm-modal-card{
  width: min(760px, calc(100vw - 32px));
}

/* Make body scroll vertical only (avoid sideways cut) */
#smCalDayModal .sm-modal-body{
  overflow-x: hidden;
}

/* Table wrapper */
.sm-cal-daytable{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Header row: make it grid with 5 columns */
.sm-cal-dayhead{
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 120px 110px;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.75);
  font-weight: 700;
  font-size: 13px;
}

/* Each booking row is a button — keep it clean & aligned */
.sm-cal-dayrow{
  width: 100%;
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
}

.sm-cal-dayrow:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(148,163,184,.40);
}

/* Inner row grid matches header columns */
.sm-cal-dayrow-inner{
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 120px 110px;
  gap: 12px;
  align-items: center;
  min-width: 0; /* critical: prevents overflow */
}

/* Time */
.sm-cal-dayrow .sm-cal-time{
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

/* Client/Service: prevent pushing the price off-screen */
.sm-cal-dayrow .sm-cal-client,
.sm-cal-dayrow .sm-cal-service{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right aligned cells */
.is-right{
  text-align: right;
  justify-self: end;
}

/* Price style */
.sm-cal-dayrow .sm-cal-price{
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* Status badge — high contrast */
.sm-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(15,23,42,.92); /* dark text for readability */
  background: rgba(226,232,240,.85);
}

/* Per-status colors (readable) */
.sm-badge-pending{
  background: rgba(253, 230, 138, .92);  /* amber */
  color: rgba(124, 45, 18, .95);
  border-color: rgba(251, 191, 36, .45);
}
.sm-badge-in_progress{
  background: rgba(147, 197, 253, .92);  /* blue */
  color: rgba(30, 58, 138, .95);
  border-color: rgba(59, 130, 246, .45);
}
.sm-badge-completed{
  background: rgba(134, 239, 172, .92);  /* green */
  color: rgba(20, 83, 45, .95);
  border-color: rgba(34, 197, 94, .45);
}
.sm-badge-cancelled{
  background: rgba(254, 202, 202, .92);  /* red */
  color: rgba(127, 29, 29, .95);
  border-color: rgba(239, 68, 68, .40);
}

/* Mobile: compress columns */
@media (max-width: 520px){
  .sm-cal-dayhead,
  .sm-cal-dayrow-inner{
    grid-template-columns: 78px minmax(0, 1fr) 96px 84px;
  }

  /* Hide Service column on very small screens */
  .sm-cal-dayhead > div:nth-child(3),
  .sm-cal-dayrow-inner > div:nth-child(3){
    display: none;
  }
}
/* =========================================================
   CALENDAR — DAY MODAL FIX (READABILITY + PRICE VISIBILITY)
========================================================= */

/* Modal width upgrade */
#smCalDayModal .sm-modal-card {
  max-width: 720px;
  width: 95vw;
}

/* Day table container */
.sm-cal-daytable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header + rows use GRID */
.sm-cal-dayrow {
  display: grid;
  grid-template-columns: 90px 1.2fr 1.4fr 110px 100px;
  align-items: center;
  gap: 12px;

  padding: 10px 14px;
  border-radius: 12px;
  background: var(--sm-surface, #fff);
}

/* Header row */
.sm-cal-dayhead {
  font-weight: 600;
  font-size: 13px;
  color: #4b5563; /* readable gray */
  background: #f3f4f6;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Data rows */
.sm-cal-dayrow-btn {
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sm-cal-dayrow-btn:hover {
  background: #f9fafb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Right-aligned columns */
.sm-cal-dayrow .is-right {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* Prevent text overflow */
.sm-cal-dayrow > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status badges — FIXED contrast */
.sm-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: capitalize;
}

.sm-badge-pending {
  background: #fef3c7;
  color: #92400e;
}

.sm-badge-in_progress {
  background: #dbeafe;
  color: #1e40af;
}

.sm-badge-completed {
  background: #dcfce7;
  color: #166534;
}

.sm-badge-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Scroll area fix */
#smCalDayList {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
/* ===============================
   CALENDAR DAY MODAL – ROW LAYOUT
================================ */

.sm-cal-daytable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sm-cal-dayrow {
  display: grid;
  grid-template-columns: 
    90px      /* Time */
    1.2fr     /* Client */
    1.5fr     /* Service */
    120px     /* Status */
    110px;    /* Price */
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
}

.sm-cal-dayrow > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-cal-dayrow .is-right {
  text-align: right;
  font-weight: 600;
}
/* Header row */
.sm-cal-dayhead {
  background: var(--sm-bg-subtle);
  color: var(--sm-text-muted);
  font-weight: 600;
}

/* Dark mode override */
[data-theme="dark"] .sm-cal-dayhead {
  background: rgba(255,255,255,0.06);
  color: #cfd6ff;
}
/* ===============================
   STATUS BADGES – DARK SAFE
================================ */

.sm-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Pending */
.sm-badge-pending {
  background: #fff1c2;
  color: #7a4a00;
}

/* Dark mode */
[data-theme="dark"] .sm-badge-pending {
  background: rgba(255, 193, 7, 0.18);
  color: #ffd966;
}
/* Dark mode row surface */
[data-theme="dark"] .sm-cal-dayrow {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.08);
}
/* =========================================================
   FINAL OVERRIDE — CALENDAR DAY MODAL (LIGHT + DARK SAFE)
   Place this at VERY BOTTOM of calendar.css
========================================================= */

/* ---------- Modal size ---------- */
#smCalDayModal .sm-modal-card {
  width: min(760px, 95vw);
  max-height: 86vh;
}

/* ---------- Scroll safety ---------- */
#smCalDayList {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 62vh;
}

/* ---------- Table wrapper ---------- */
.sm-cal-daytable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Header row ---------- */
.sm-cal-dayhead {
  display: grid;
  grid-template-columns: 90px 1.2fr 1.5fr 120px 110px;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;

  background: var(--sm-bg-subtle, #f3f4f6);
  color: var(--sm-text-muted, #4b5563);
  border: 1px solid var(--sm-border, #e5e7eb);
}

/* ---------- Data rows ---------- */
.sm-cal-dayrow {
  display: grid;
  grid-template-columns: 90px 1.2fr 1.5fr 120px 110px;
  gap: 12px;
  align-items: center;

  padding: 10px 14px;
  border-radius: 12px;
  background: var(--sm-surface, #ffffff);
  border: 1px solid var(--sm-border, #e5e7eb);
}

/* Clickable rows */
.sm-cal-dayrow-btn {
  cursor: pointer;
  text-align: left;
}

/* Hover */
.sm-cal-dayrow-btn:hover {
  background: var(--sm-surface-2, #f9fafb);
}

/* ---------- Prevent overflow ---------- */
.sm-cal-dayrow > div {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Price ---------- */
.sm-cal-dayrow .is-right {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Status badges (READABLE) ---------- */
.sm-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.sm-badge-pending {
  background: #fde68a;
  color: #92400e;
}

.sm-badge-in_progress {
  background: #bfdbfe;
  color: #1e40af;
}

.sm-badge-completed {
  background: #bbf7d0;
  color: #166534;
}

.sm-badge-cancelled {
  background: #fecaca;
  color: #7f1d1d;
}

/* ---------- DARK MODE OVERRIDES ---------- */
[data-theme="dark"] .sm-cal-dayhead {
  background: rgba(255,255,255,0.06);
  color: #cfd6ff;
  border-color: rgba(255,255,255,0.10);
}

[data-theme="dark"] .sm-cal-dayrow {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  );
  border-color: rgba(255,255,255,0.10);
}

[data-theme="dark"] .sm-cal-dayrow-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* Dark status contrast */
[data-theme="dark"] .sm-badge-pending {
  background: rgba(255,193,7,0.25);
  color: #ffd966;
}


/* ============================================================
   CALENDAR — Week / Agenda + Filters (Option C)
============================================================ */

.sm-cal-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sm-cal-viewtog{
  display:flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.sm-cal-viewtog .sm-seg{
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  opacity:.85;
}
.sm-cal-viewtog .sm-seg.is-active{
  background:rgba(255,255,255,.10);
  opacity:1;
}
.sm-cal-filters{
  display:flex;
  gap:8px;
  align-items:center;
}
.sm-cal-filters .sm-select,
.sm-cal-filters .sm-input{
  height:36px;
  border-radius:12px;
}
.sm-cal-filters .sm-input{
  width:220px;
}

.sm-cal-conflict{
  display:inline-flex;
  margin-left:6px;
  font-size:12px;
  opacity:.9;
}

.sm-cal-monthwrap{}

/* Week grid */
.sm-week-grid{
  display:grid;
  grid-template-columns: 90px repeat(7, 1fr);
  gap:8px;
  margin-top:14px;
}
.sm-week-head-empty{ height:34px; }
.sm-week-head{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.sm-week-row{
  display:contents;
}
.sm-week-time{
  height:76px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:10px 10px 0 0;
  font-size:12px;
  opacity:.7;
}
.sm-week-cell{
  min-height:76px;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sm-week-cell.is-conflict{
  outline:2px solid rgba(255,180,0,.35);
}
.sm-week-item{
  width:100%;
  border:0;
  text-align:left;
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  background:rgba(255,255,255,.06);
}
.sm-week-item:hover{ background:rgba(255,255,255,.10); }
.sm-week-item-txt{ font-size:12px; line-height:1.2; }
.sm-week-hint{
  margin-top:10px;
  font-size:12px;
  opacity:.75;
}

/* Agenda */
.sm-agenda-day{ margin-top:14px; }
.sm-agenda-daytitle{
  font-weight:700;
  font-size:13px;
  margin:10px 0 8px;
  opacity:.9;
}
.sm-agenda-list{ display:flex; flex-direction:column; gap:8px; }
.sm-agenda-item{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sm-agenda-item:hover{ background:rgba(255,255,255,.07); }
.sm-agenda-item.is-conflict{
  outline:2px solid rgba(255,180,0,.35);
}
.sm-agenda-left{ display:flex; gap:12px; align-items:center; }
.sm-agenda-time{ font-weight:700; font-size:12px; opacity:.85; min-width:70px; }
.sm-agenda-main{ display:flex; flex-direction:column; gap:2px; }
.sm-agenda-service{ font-weight:700; font-size:13px; }
.sm-agenda-client{ font-size:12px; opacity:.75; }
.sm-agenda-status{
  font-size:12px;
  text-transform:capitalize;
  opacity:.75;
}

@media (max-width: 900px){
  .sm-week-grid{ grid-template-columns: 70px repeat(7, minmax(120px, 1fr)); overflow:auto; }
  .sm-cal-filters .sm-input{ width:160px; }
}
/* ============================================================
   CALENDAR — Week + Agenda Theme Fix (Light/Dark)
   - Fix invisible week boxes in LIGHT
   - Improve “shade” / glass consistency in DARK
============================================================ */

/* ---------- NAV PILL (date range) polish ---------- */
#view-calendar .sm-cal-nav{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Dark: date range pill was too bright/gray */
html.dark #view-calendar .sm-cal-nav,
body.dark #view-calendar .sm-cal-nav,
[data-theme="dark"] #view-calendar .sm-cal-nav{
  background: rgba(15, 23, 42, .55) !important;    /* deep glass */
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
}

/* Light: keep glass but make it crisp */
html:not(.dark) #view-calendar .sm-cal-nav,
[data-theme="light"] #view-calendar .sm-cal-nav{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.08) !important;
}

/* ---------- WEEK GRID (LIGHT) — make boxes visible ---------- */
html:not(.dark) #view-calendar .sm-week-head,
[data-theme="light"] #view-calendar .sm-week-head{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: rgba(15,23,42,.88) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

html:not(.dark) #view-calendar .sm-week-cell,
[data-theme="light"] #view-calendar .sm-week-cell{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

html:not(.dark) #view-calendar .sm-week-item,
[data-theme="light"] #view-calendar .sm-week-item{
  background: rgba(15,23,42,.06) !important;
}

html:not(.dark) #view-calendar .sm-week-item:hover,
[data-theme="light"] #view-calendar .sm-week-item:hover{
  background: rgba(15,23,42,.10) !important;
}

/* ---------- WEEK GRID (DARK) — improve shade ---------- */
html.dark #view-calendar .sm-week-head,
body.dark #view-calendar .sm-week-head,
[data-theme="dark"] #view-calendar .sm-week-head{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(148,163,184,.18) !important;
}

html.dark #view-calendar .sm-week-cell,
body.dark #view-calendar .sm-week-cell,
[data-theme="dark"] #view-calendar .sm-week-cell{
  background: rgba(2, 6, 23, .25) !important; /* deeper than before */
  border-color: rgba(148,163,184,.18) !important;
}

/* ---------- AGENDA (LIGHT) — fix “panget na shade” ---------- */
html:not(.dark) #view-calendar .sm-agenda-item,
[data-theme="light"] #view-calendar .sm-agenda-item{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

html:not(.dark) #view-calendar .sm-agenda-item:hover,
[data-theme="light"] #view-calendar .sm-agenda-item:hover{
  background: rgba(255,255,255,.88) !important;
}

/* ---------- AGENDA (DARK) — consistent glass ---------- */
html.dark #view-calendar .sm-agenda-item,
body.dark #view-calendar .sm-agenda-item,
[data-theme="dark"] #view-calendar .sm-agenda-item{
  background: rgba(2, 6, 23, .22) !important;
  border-color: rgba(148,163,184,.18) !important;
}

html.dark #view-calendar .sm-agenda-item:hover,
body.dark #view-calendar .sm-agenda-item:hover,
[data-theme="dark"] #view-calendar .sm-agenda-item:hover{
  background: rgba(255,255,255,.08) !important;
}
/* ============================================================
   CALENDAR THEME FIX (v87)
   - Week grid boxes visible in LIGHT
   - Dark mode nav pill + agenda shade improved
   Works with: html.dark OR [data-theme="dark"]
============================================================ */

/* -------------------------
   DARK MODE POLISH
-------------------------- */
html.dark .sm-cal-nav,
body.dark .sm-cal-nav,
[data-theme="dark"] .sm-cal-nav{
  background: rgba(2, 6, 23, .40) !important;
  border-color: rgba(148,163,184,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
}

html.dark .sm-week-head,
body.dark .sm-week-head,
[data-theme="dark"] .sm-week-head{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(148,163,184,.18) !important;
}

html.dark .sm-week-cell,
body.dark .sm-week-cell,
[data-theme="dark"] .sm-week-cell{
  background: rgba(2, 6, 23, .22) !important;
  border-color: rgba(148,163,184,.18) !important;
}

html.dark .sm-agenda-item,
body.dark .sm-agenda-item,
[data-theme="dark"] .sm-agenda-item{
  background: rgba(2, 6, 23, .20) !important;
  border-color: rgba(148,163,184,.18) !important;
}

html.dark .sm-agenda-item:hover,
body.dark .sm-agenda-item:hover,
[data-theme="dark"] .sm-agenda-item:hover{
  background: rgba(255,255,255,.08) !important;
}

/* -------------------------
   LIGHT MODE OVERRIDES
   (Fix invisible Week boxes + nicer Agenda)
-------------------------- */
html:not(.dark) .sm-cal-nav,
[data-theme="light"] .sm-cal-nav{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.08) !important;
}

html:not(.dark) .sm-week-head,
[data-theme="light"] .sm-week-head{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(15,23,42,.88) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
}

html:not(.dark) .sm-week-cell,
[data-theme="light"] .sm-week-cell{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
}

html:not(.dark) .sm-week-item,
[data-theme="light"] .sm-week-item{
  background: rgba(15,23,42,.06) !important;
}

html:not(.dark) .sm-week-item:hover,
[data-theme="light"] .sm-week-item:hover{
  background: rgba(15,23,42,.10) !important;
}

html:not(.dark) .sm-agenda-item,
[data-theme="light"] .sm-agenda-item{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
}

html:not(.dark) .sm-agenda-item:hover,
[data-theme="light"] .sm-agenda-item:hover{
  background: rgba(255,255,255,.88) !important;
}

/* --- Calendar Week view: improve readability + clickability (DARK) --- */
html[data-theme="dark"] #view-calendar .sm-week-cell,
html.dark #view-calendar .sm-week-cell,
body.dark #view-calendar .sm-week-cell {
  border-color: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="dark"] #view-calendar .sm-week-item,
html.dark #view-calendar .sm-week-item,
body.dark #view-calendar .sm-week-item {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  background: rgba(148, 163, 184, 0.10) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.95) !important;
}

html[data-theme="dark"] #view-calendar .sm-week-item:hover,
html.dark #view-calendar .sm-week-item:hover,
body.dark #view-calendar .sm-week-item:hover {
  background: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] #view-calendar .sm-week-item-txt,
html.dark #view-calendar .sm-week-item-txt,
body.dark #view-calendar .sm-week-item-txt {
  color: rgba(226, 232, 240, 0.95) !important;
}


/* ============================================================
   CALENDAR MOBILE LAYOUT v109
   - Keeps the document viewport overflow-free at 390/375/360px.
   - Month remains a true seven-column grid.
   - Week owns an intentional internal horizontal scroller.
============================================================ */
@media (max-width: 900px){
  #view-calendar,
  #view-calendar.sm-view,
  #view-calendar .sm-cal{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #view-calendar{
    overflow-x:clip;
  }

  #view-calendar .sm-cal{
    padding:14px 12px 18px;
    overflow-x:clip;
  }

  #view-calendar .sm-cal-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:12px;
  }

  #view-calendar .sm-cal-title h2{ font-size:20px; }
  #view-calendar .sm-cal-title p{ font-size:12px; }

  #view-calendar .sm-cal-controls{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  #view-calendar .sm-cal-nav{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 40px;
    align-items:center;
    gap:6px;
    padding:6px;
    border-radius:12px;
  }

  #view-calendar .sm-cal-nav .sm-btn{
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
  }

  #view-calendar .sm-cal-month{
    min-width:0;
    width:auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
  }

  #view-calendar .sm-cal-toolbar{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:8px;
  }

  #view-calendar .sm-cal-viewtog{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }

  #view-calendar .sm-cal-viewtog .sm-seg{
    width:100%;
    min-width:0;
    padding:8px 4px;
  }

  #view-calendar .sm-cal-filters{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }

  #view-calendar .sm-cal-filters .sm-select,
  #view-calendar .sm-cal-filters .sm-input{
    width:100% !important;
    min-width:0;
    max-width:100%;
  }

  #view-calendar .sm-cal-toolbar > .sm-btn{
    width:100%;
    min-width:0;
  }

  #view-calendar .sm-cal-monthwrap,
  #view-calendar .sm-cal-agendawrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  #view-calendar .sm-cal-weekdays,
  #view-calendar .sm-cal-grid{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:3px;
  }

  #view-calendar .sm-cal-weekdays{
    margin:8px 0 5px;
    font-size:10px;
  }

  #view-calendar .sm-cal-weekdays > div{
    min-width:0;
    padding:5px 0;
    text-align:center;
    overflow:hidden;
  }

  #view-calendar .sm-cal-cell{
    min-width:0;
    min-height:74px;
    padding:6px 4px;
    border-radius:10px;
    overflow:hidden;
  }

  #view-calendar .sm-cal-daynum{
    margin-bottom:5px;
    font-size:12px;
  }

  #view-calendar .sm-cal-items{ gap:4px; min-width:0; }
  #view-calendar .sm-cal-chip{
    width:100%;
    min-width:0;
    gap:4px;
    padding:4px 5px;
    font-size:10px;
  }
  #view-calendar .sm-cal-chip-dot{ width:6px; height:6px; }
  #view-calendar .sm-cal-more{ padding:4px 5px; font-size:10px; }

  #view-calendar .sm-cal-weekwrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }

  #view-calendar .sm-week-grid{
    width:max-content;
    min-width:980px;
    overflow:visible;
  }

  #view-calendar .sm-agenda-item{
    width:100%;
    min-width:0;
    gap:8px;
    padding:10px;
  }
  #view-calendar .sm-agenda-left,
  #view-calendar .sm-agenda-main{ min-width:0; }
  #view-calendar .sm-agenda-service,
  #view-calendar .sm-agenda-client{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #smCalDayModal .sm-modal-card{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
}

@media (max-width: 390px){
  #view-calendar .sm-cal{ padding-inline:8px; }
  #view-calendar .sm-cal-nav{ grid-template-columns:38px minmax(0,1fr) 38px; }
  #view-calendar .sm-cal-nav .sm-btn{ width:38px; min-width:38px; height:38px; }
  #view-calendar .sm-cal-cell{ min-height:68px; padding-inline:3px; }
}

/* ============================================================
   CALENDAR STATUS COLOR CONTRACT v113.0.0
   One accessible status language across Month, Week, and Agenda.
   The extra selector specificity intentionally wins over the
   legacy neutral calendar rules and the shared theme overrides.
============================================================ */
html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-pending,
  .sm-week-item.sm-week-item-pending,
  .sm-agenda-item.sm-agenda-item-pending
){
  --sm-cal-status-bg:#fff4d6;
  --sm-cal-status-border:#c56605;
  --sm-cal-status-text:#713600;
  --sm-cal-status-dot:#d97706;
  --sm-cal-status-ring:rgba(217,119,6,.22);
}

html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-in_progress,
  .sm-week-item.sm-week-item-in_progress,
  .sm-agenda-item.sm-agenda-item-in_progress
){
  --sm-cal-status-bg:#e8f1ff;
  --sm-cal-status-border:#2563eb;
  --sm-cal-status-text:#173f89;
  --sm-cal-status-dot:#2563eb;
  --sm-cal-status-ring:rgba(37,99,235,.20);
}

html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-completed,
  .sm-week-item.sm-week-item-completed,
  .sm-agenda-item.sm-agenda-item-completed
){
  --sm-cal-status-bg:#e6f7ed;
  --sm-cal-status-border:#16803a;
  --sm-cal-status-text:#0f5c2c;
  --sm-cal-status-dot:#16a34a;
  --sm-cal-status-ring:rgba(22,163,74,.20);
}

html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-cancelled,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-cancelled
){
  --sm-cal-status-bg:#ffe8e8;
  --sm-cal-status-border:#dc2626;
  --sm-cal-status-text:#8b1e1e;
  --sm-cal-status-dot:#dc2626;
  --sm-cal-status-ring:rgba(220,38,38,.20);
}

html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-pending,
  .sm-cal-chip.sm-cal-chip-in_progress,
  .sm-cal-chip.sm-cal-chip-completed,
  .sm-cal-chip.sm-cal-chip-cancelled,
  .sm-week-item.sm-week-item-pending,
  .sm-week-item.sm-week-item-in_progress,
  .sm-week-item.sm-week-item-completed,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-pending,
  .sm-agenda-item.sm-agenda-item-in_progress,
  .sm-agenda-item.sm-agenda-item-completed,
  .sm-agenda-item.sm-agenda-item-cancelled
){
  background:var(--sm-cal-status-bg) !important;
  border:1px solid var(--sm-cal-status-border) !important;
  color:var(--sm-cal-status-text) !important;
  opacity:1 !important;
}

html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-pending,
  .sm-cal-chip.sm-cal-chip-in_progress,
  .sm-cal-chip.sm-cal-chip-completed,
  .sm-cal-chip.sm-cal-chip-cancelled,
  .sm-week-item.sm-week-item-pending,
  .sm-week-item.sm-week-item-in_progress,
  .sm-week-item.sm-week-item-completed,
  .sm-week-item.sm-week-item-cancelled
) .sm-cal-chip-dot{
  flex:0 0 auto;
  background:var(--sm-cal-status-dot) !important;
  box-shadow:0 0 0 3px var(--sm-cal-status-ring) !important;
}

html body #view-calendar .sm-week-item-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

html body #view-calendar .sm-week-item-txt{
  display:block;
  min-width:0;
  overflow:hidden;
  color:inherit !important;
  text-overflow:ellipsis;
  white-space:normal;
}

html body #view-calendar .sm-week-item-status,
html body #view-calendar .sm-agenda-status{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:inherit !important;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.25;
  opacity:1 !important;
  text-transform:uppercase;
  white-space:nowrap;
}

html body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-cancelled .sm-cal-chip-txt,
  .sm-week-item.sm-week-item-cancelled .sm-week-item-txt,
  .sm-agenda-item.sm-agenda-item-cancelled .sm-agenda-service
){
  text-decoration:line-through;
}

html body #view-calendar :is(
  .sm-week-item.sm-week-item-pending,
  .sm-week-item.sm-week-item-in_progress,
  .sm-week-item.sm-week-item-completed,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-pending,
  .sm-agenda-item.sm-agenda-item-in_progress,
  .sm-agenda-item.sm-agenda-item-completed,
  .sm-agenda-item.sm-agenda-item-cancelled
):hover{
  filter:brightness(.97);
}

html body #view-calendar :is(
  .sm-week-item.sm-week-item-pending,
  .sm-week-item.sm-week-item-in_progress,
  .sm-week-item.sm-week-item-completed,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-pending,
  .sm-agenda-item.sm-agenda-item-in_progress,
  .sm-agenda-item.sm-agenda-item-completed,
  .sm-agenda-item.sm-agenda-item-cancelled
):focus-visible{
  outline:3px solid var(--sm-cal-status-dot);
  outline-offset:2px;
}

html.dark body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-pending,
  .sm-week-item.sm-week-item-pending,
  .sm-agenda-item.sm-agenda-item-pending
),
html[data-theme="dark"] body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-pending,
  .sm-week-item.sm-week-item-pending,
  .sm-agenda-item.sm-agenda-item-pending
),
html body.dark #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-pending,
  .sm-week-item.sm-week-item-pending,
  .sm-agenda-item.sm-agenda-item-pending
){
  --sm-cal-status-bg:#4a2d08;
  --sm-cal-status-border:#f59e0b;
  --sm-cal-status-text:#ffe6a8;
  --sm-cal-status-dot:#fbbf24;
  --sm-cal-status-ring:rgba(251,191,36,.25);
}

html.dark body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-in_progress,
  .sm-week-item.sm-week-item-in_progress,
  .sm-agenda-item.sm-agenda-item-in_progress
),
html[data-theme="dark"] body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-in_progress,
  .sm-week-item.sm-week-item-in_progress,
  .sm-agenda-item.sm-agenda-item-in_progress
),
html body.dark #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-in_progress,
  .sm-week-item.sm-week-item-in_progress,
  .sm-agenda-item.sm-agenda-item-in_progress
){
  --sm-cal-status-bg:#132e57;
  --sm-cal-status-border:#60a5fa;
  --sm-cal-status-text:#dbeafe;
  --sm-cal-status-dot:#60a5fa;
  --sm-cal-status-ring:rgba(96,165,250,.25);
}

html.dark body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-completed,
  .sm-week-item.sm-week-item-completed,
  .sm-agenda-item.sm-agenda-item-completed
),
html[data-theme="dark"] body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-completed,
  .sm-week-item.sm-week-item-completed,
  .sm-agenda-item.sm-agenda-item-completed
),
html body.dark #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-completed,
  .sm-week-item.sm-week-item-completed,
  .sm-agenda-item.sm-agenda-item-completed
){
  --sm-cal-status-bg:#123722;
  --sm-cal-status-border:#4ade80;
  --sm-cal-status-text:#d1fae5;
  --sm-cal-status-dot:#4ade80;
  --sm-cal-status-ring:rgba(74,222,128,.25);
}

html.dark body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-cancelled,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-cancelled
),
html[data-theme="dark"] body #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-cancelled,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-cancelled
),
html body.dark #view-calendar :is(
  .sm-cal-chip.sm-cal-chip-cancelled,
  .sm-week-item.sm-week-item-cancelled,
  .sm-agenda-item.sm-agenda-item-cancelled
){
  --sm-cal-status-bg:#46191d;
  --sm-cal-status-border:#fb7185;
  --sm-cal-status-text:#ffe4e6;
  --sm-cal-status-dot:#fb7185;
  --sm-cal-status-ring:rgba(251,113,133,.25);
}

html.dark body #view-calendar :is(.sm-week-item-status,.sm-agenda-status),
html[data-theme="dark"] body #view-calendar :is(.sm-week-item-status,.sm-agenda-status),
html body.dark #view-calendar :is(.sm-week-item-status,.sm-agenda-status){
  background:rgba(2,6,23,.28);
}