/* ============================================================
   CALENDAR — Month, Week, and Day View Styles
   ============================================================
   Source: css/styles.css
   - Month grid: lines 742-749
   - View toggle: lines 1665-1671
   - Completed job slash: lines 1673-1688
   - Week view: lines 1691-1711
   - Day view: lines 1714-1722
   ============================================================ */

/* ---------- Calendar Grid (Month) ---------- */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-header { text-align:center; font-size:0.65rem; font-weight:700; color:var(--gray-500); text-transform:uppercase; padding:0.3rem; }
.cal-cell { background:var(--navy); padding:0.25rem 0.35rem; min-height:70px; border-radius:4px; font-size:0.7rem; cursor:pointer; transition:background 0.2s; }
.cal-cell:hover { background:var(--navy-lighter); }
.cal-cell.today { border:1px solid var(--gold); }
.cal-cell.other-month { opacity:0.3; }
.cal-day { color:var(--gray-300); font-weight:600; margin-bottom:2px; }
.cal-job { background:rgba(212,175,55,0.15); color:var(--champagne); padding:0.1rem 0.25rem; border-radius:2px; margin-top:2px; font-size:0.58rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:2px solid var(--gold); }

/* ---------- View Toggle ---------- */
.cal-view-btn { background: var(--navy); border: 1px solid var(--navy-lighter); color: var(--gray-400); font-size: 0.72rem; padding: 0.25rem 0.75rem; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.cal-view-btn:hover { color: var(--champagne); border-color: var(--gold-dim); }
.cal-view-btn.active { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 600; }

/* Week filter buttons */
.week-filter-btn { font-size: 0.65rem !important; padding: 0.15rem 0.5rem !important; }
.week-filter-btn.active { background: var(--gold) !important; color: var(--navy) !important; border-color: var(--gold) !important; font-weight: 600; }

/* ---------- Completed Job Slash Effect ---------- */
.job-completed-slash { position: relative; overflow: visible; }
.job-completed-slash::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -8%;
  width: 116%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, #e74c3c 4%, #e74c3c 12%, #d63031 25%, #e74c3c 40%, #c0392b 55%, #e74c3c 70%, #d63031 88%, #e74c3c 96%, transparent 100%);
  transform: rotate(-12deg) translateY(-50%);
  opacity: 0.75;
  border-radius: 1px;
  pointer-events: none;
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.5'/%3E%3C/filter%3E%3C/svg%3E#r");
}

/* ---------- Week View ---------- */
.cal-week-view { overflow-x: auto; }
.cal-week-header { display: flex; border-bottom: 1px solid var(--navy-lighter); }
.cal-week-day-header { flex: 1; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--gray-400); padding: 0.4rem 0.2rem; text-transform: uppercase; }
.cal-week-day-header.today { color: var(--gold); border-bottom: 2px solid var(--gold); }
.cal-week-body { display: flex; position: relative; }
.cal-week-time-gutter { width: 50px; flex-shrink: 0; }
.cal-week-time-label { height: 40px; font-size: 0.6rem; color: var(--gray-500); text-align: right; padding-right: 6px; line-height: 40px; }
.cal-week-day-col { flex: 1; position: relative; border-left: 1px solid var(--navy-lighter); min-width: 80px; cursor: pointer; }
.cal-week-day-col.today { background: rgba(212, 175, 55, 0.04); }
.cal-week-slot { height: 40px; border-bottom: 1px solid rgba(28, 46, 82, 0.5); }
.cal-week-event { position: absolute; border-radius: 4px; padding: 2px 4px; cursor: pointer; overflow: hidden; z-index: 2; color: white; font-size: 0.6rem; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: opacity 0.15s; border-left: 2px solid rgba(255,255,255,0.3); }
.cal-week-event:hover { opacity: 0.85; z-index: 5; }
.cal-week-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.cal-week-event-time { font-size: 0.55rem; opacity: 0.9; }

/* All-day event banners */
.cal-week-allday { display: flex; border-bottom: 2px solid var(--navy-lighter); min-height: 26px; }
.cal-week-allday-col { flex: 1; border-left: 1px solid var(--navy-lighter); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.cal-allday-event { border-radius: 3px; padding: 1px 6px; color: white; font-size: 0.58rem; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.cal-allday-event:hover { opacity: 0.85; }
.cal-day-allday { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; padding: 4px 8px; background: var(--navy); border-radius: 6px; }

/* ---------- Day View ---------- */
.cal-day-view { overflow-x: auto; }
.cal-day-body { display: flex; position: relative; }
.cal-day-col { flex: 1; position: relative; border-left: 1px solid var(--navy-lighter); min-width: 200px; cursor: pointer; }
.cal-day-col.today { background: rgba(212, 175, 55, 0.04); }
.cal-day-event { position: absolute; border-radius: 6px; padding: 4px 8px; cursor: pointer; overflow: hidden; z-index: 2; color: white; font-size: 0.72rem; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: opacity 0.15s; border-left: 3px solid rgba(255,255,255,0.3); }
.cal-day-event:hover { opacity: 0.85; z-index: 5; }
.cal-day-event-detail { font-size: 0.62rem; opacity: 0.85; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }