/* ============================================================================
 * Calendar view — vanilla CSS, theme-aware (uses CRM CSS variables)
 * Task B4 (Sundial 4242) — separate from Schedule list view
 * ============================================================================ */

.cal-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Toolbar */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.cal-toolbar .cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-toolbar .cal-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  min-width: 180px;
  padding: 0 6px;
}
.cal-toolbar .cal-mode {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cal-toolbar .cal-mode button {
  background: var(--bg);
  color: var(--text-2);
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.cal-toolbar .cal-mode button + button { border-left: 1px solid var(--border); }
.cal-toolbar .cal-mode button.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.cal-toolbar .cal-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.cal-toolbar .cal-filter label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.cal-toolbar .cal-filter select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

/* Month grid */
.cal-grid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cal-dow {
  background: var(--bg-2);
  color: var(--text-3);
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.cal-cell {
  background: var(--bg-1);
  min-height: 96px;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: background 80ms ease;
}
.cal-cell:hover { background: var(--bg-2); }
.cal-cell.cal-other-month { background: var(--bg); opacity: 0.55; }
.cal-cell.cal-today .cal-daynum {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-daynum {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  align-self: flex-start;
}

/* Event blocks (jobs) */
.cal-event {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid rgba(0,0,0,0.25);
  line-height: 1.3;
}
.cal-event:hover { filter: brightness(1.15); }
.cal-event-scheduled   { background: #3b82f6; }   /* blue */
.cal-event-dispatched  { background: #f59e0b; }   /* amber */
.cal-event-in_progress { background: #8b5cf6; }   /* violet */
.cal-event-completed   { background: #10b981; }   /* green */
.cal-event-cancelled   { background: #6b7280; }   /* gray */
.cal-event-unassigned  { background: #475569; }   /* slate */

/* Invoice "$" badge — different visual style than jobs */
.cal-inv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  background: transparent;
  color: var(--ok);
  border: 1px solid var(--ok);
  cursor: pointer;
  margin-right: 3px;
  font-family: var(--mono, monospace);
}
.cal-inv.cal-inv-overdue { color: var(--rose, #f43f5e); border-color: var(--rose, #f43f5e); }
.cal-inv.cal-inv-paid    { color: var(--text-3); border-color: var(--text-3); }
.cal-inv:hover { background: var(--bg-2); }

.cal-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.cal-more {
  font-size: 9px;
  color: var(--text-3);
  font-style: italic;
}

/* Legend */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 10px;
  color: var(--text-3);
}
.cal-legend .cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-legend .cal-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Week & Day timed grid */
.cal-grid-week,
.cal-grid-day {
  display: grid;
  grid-template-columns: 56px repeat(var(--cal-cols, 7), 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-height: 64vh;
  overflow-y: auto;
}
.cal-time-col,
.cal-day-col {
  background: var(--bg-1);
  position: relative;
}
.cal-time-col { display: flex; flex-direction: column; }
.cal-time-slot {
  height: 36px;
  font-size: 10px;
  color: var(--text-3);
  padding: 2px 6px;
  text-align: right;
  border-bottom: 1px dashed var(--border);
}
.cal-day-head {
  background: var(--bg-2);
  color: var(--text-2);
  padding: 6px 8px;
  font-size: 11px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.cal-day-head.cal-today { color: var(--accent); font-weight: 600; }
.cal-day-col-body {
  position: relative;
  height: calc(36px * 24);
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 100% 36px;
  cursor: pointer;
}
.cal-timed-event {
  position: absolute;
  left: 3px;
  right: 3px;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  border-left: 3px solid rgba(0,0,0,0.25);
  line-height: 1.25;
}
.cal-timed-event .cal-te-title { font-weight: 600; }
.cal-timed-event .cal-te-meta { opacity: 0.85; font-size: 9px; }

@media (max-width: 720px) {
  .cal-cell { min-height: 70px; }
  .cal-event { font-size: 9px; padding: 1px 3px; }
  .cal-toolbar .cal-filter { margin-left: 0; width: 100%; }
}