/* ══ PAGE: CALENDAR ══ */

.cal-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px; gap: 16px;
}
.cal-header-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cal-nav {
  display: flex; align-items: center; gap: 2px;
  background: #141820; border: 1px solid #1f2530; border-radius: 9px;
  padding: 3px;
}
.cal-nav-btn {
  background: transparent; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px;
  font-size: 16px; color: #7a8a9b;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.cal-nav-btn:hover { background: #1f2530; color: #dce3ed; }
.cal-month-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #dce3ed;
  padding: 0 10px; white-space: nowrap;
}

/* ── View tabs ── */
.cal-view-tabs {
  display: flex; background: #141820; border: 1px solid #1f2530;
  border-radius: 9px; padding: 3px; gap: 2px;
}
.cal-view-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 5px 14px; border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: #7a8a9b;
  transition: background 0.15s, color 0.15s;
}
.cal-view-tab:hover { color: #dce3ed; }
.cal-view-tab.active { background: #1f2530; color: #d4f542; }

/* ── Nav title as button ── */
.cal-nav-title-btn {
  background: transparent; border: none; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #dce3ed;
  padding: 0 10px; white-space: nowrap;
  transition: color 0.15s;
}
.cal-nav-title-btn:hover { color: #d4f542; }

/* ── Year/month picker dropdown ── */
.cal-year-picker {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #141820; border: 1px solid #2a3040; border-radius: 12px;
  padding: 14px 16px; z-index: 500; min-width: 260px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}
.cal-yp-year-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-yp-year {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900; letter-spacing: 1px; color: #dce3ed;
}
.cal-yp-year-clickable {
  background: transparent; border: none; cursor: pointer;
  border-radius: 6px; padding: 2px 8px;
  transition: color 0.15s, background 0.15s;
}
.cal-yp-year-clickable:hover { background: rgba(255,255,255,0.06); }
.cal-yp-year-range { font-size: 15px; letter-spacing: 0.5px; }
.cal-yp-year-btn {
  background: transparent; border: none; cursor: pointer;
  color: #7a8a9b; font-size: 18px; padding: 2px 8px; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.cal-yp-year-btn:hover { color: #dce3ed; background: rgba(255,255,255,0.06); }
.cal-yp-months {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.cal-yp-month {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 6px 4px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a8a9b;
  transition: all 0.12s; text-align: center;
}
.cal-yp-month:hover { border-color: #2a3040; color: #dce3ed; background: rgba(255,255,255,0.04); }
.cal-yp-month.active { background: rgba(212,245,66,0.12); border-color: rgba(212,245,66,0.4); color: #d4f542; }
.cal-yp-month.today  { color: #8899aa; }
.cal-yp-today-btn {
  display: block; width: 100%; margin-top: 8px;
  background: transparent; border: 1px solid #2a3040; border-radius: 6px;
  padding: 5px 0; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a8a9b;
  transition: all 0.12s;
}
.cal-yp-today-btn:hover { border-color: #d4f542; color: #d4f542; }

/* ── Grid wrap + slide animation ── */
.cal-grid-wrap { overflow: hidden; position: relative; }

@keyframes calSlideOutLeft  { from { transform:translateX(0); opacity:1; } to { transform:translateX(-100%); opacity:0; } }
@keyframes calSlideOutRight { from { transform:translateX(0); opacity:1; } to { transform:translateX(100%); opacity:0; } }
@keyframes calSlideInRight  { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes calSlideInLeft   { from { transform:translateX(-100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.cal-anim-out-left  { animation: calSlideOutLeft  0.26s ease forwards; }
.cal-anim-out-right { animation: calSlideOutRight 0.26s ease forwards; }
.cal-anim-in-right  { animation: calSlideInRight  0.26s ease forwards; }
.cal-anim-in-left   { animation: calSlideInLeft   0.26s ease forwards; }

/* ── Layout ── */
.cal-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 14px;
  align-items: start;
}

/* ── Left sidebar ── */
.cal-sidebar { display: flex; flex-direction: column; gap: 12px; }

.cal-panel { padding: 14px 16px; }

.cal-sidebar-add-btn {
  background: transparent; border: 1px solid #2a3040; border-radius: 6px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700;
  color: #7a8a9b; cursor: pointer; transition: all 0.15s;
}
.cal-sidebar-add-btn:hover { border-color: #d4f542; color: #d4f542; }

/* ── Team sidebar scroll + filter ── */
.cal-team-controls {
  display: flex; gap: 6px; margin-bottom: 6px; align-items: center;
}
.cal-team-role-filter {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
}
.cal-team-role-chip {
  background: transparent; border: 1px solid #2a3040; border-radius: 5px;
  padding: 3px 8px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a8a9b; cursor: pointer;
  transition: all 0.12s;
}
.cal-team-role-chip:hover { border-color: #7a8a9b; color: #dce3ed; }
.cal-team-role-chip.active { border-color: #d4f542; color: #d4f542; background: rgba(212,245,66,0.08); }
.cal-filter-list-scroll { max-height: 260px; overflow-y: auto; }
.cal-filter-list-scroll::-webkit-scrollbar { width: 4px; }
.cal-filter-list-scroll::-webkit-scrollbar-track { background: transparent; }
.cal-filter-list-scroll::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 2px; }

/* Team / car filter list */
.cal-filter-list { display: flex; flex-direction: column; gap: 4px; }
.cal-filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  cursor: pointer; transition: background 0.12s;
  user-select: none; position: relative;
}
.cal-filter-item:hover { background: rgba(255,255,255,0.03); }
.cal-filter-item.inactive { opacity: 0.35; }
.cal-filter-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.cal-filter-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}
.cal-filter-label {
  flex: 1; font-size: 12px; font-weight: 500; color: #dce3ed;
}
.cal-filter-sub { font-size: 10px; color: #7a8a9b; }
.cal-filter-check {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid #2a3040; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: transparent;
  transition: all 0.12s;
}
.cal-filter-item:not(.inactive) .cal-filter-check {
  background: rgba(212,245,66,0.15); border-color: rgba(212,245,66,0.4);
  color: #d4f542;
}

/* Member delete button */
.cal-member-delete {
  background: transparent; border: none; cursor: pointer;
  color: #3a4555; font-size: 11px; padding: 2px 4px; border-radius: 4px;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.cal-member-delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* Role group labels */
.cal-role-group { margin-bottom: 4px; }
.cal-role-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #3a4555;
  padding: 6px 10px 2px; margin-top: 4px;
}
.cal-role-group:first-child .cal-role-label { margin-top: 0; }

/* Upcoming events list */
.cal-upcoming-list { display: flex; flex-direction: column; gap: 8px; }
.cal-upcoming-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 8px;
  border-left: 3px solid transparent;
  background: #0f1318; transition: background 0.12s;
  cursor: pointer;
}
.cal-upcoming-item:hover { background: rgba(255,255,255,0.03); }
.cal-upcoming-date {
  display: flex; flex-direction: column; align-items: center;
  min-width: 28px; flex-shrink: 0;
}
.cal-upcoming-day {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900; line-height: 1; color: #dce3ed;
}
.cal-upcoming-mon {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #7a8a9b;
}
.cal-upcoming-body { flex: 1; }
.cal-upcoming-name { font-size: 12px; font-weight: 600; color: #dce3ed; margin-bottom: 2px; }
.cal-upcoming-meta { font-size: 11px; color: #7a8a9b; }
.cal-upcoming-avatars { display: flex; margin-top: 5px; }
.cal-upcoming-av {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #141820;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7px; font-weight: 800;
  margin-left: -5px;
}
.cal-upcoming-av:first-child { margin-left: 0; }

/* ── Week view ── */
.cal-week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-week-cell {
  min-height: 140px; padding: 10px 8px 8px;
  border-right: 1px solid #1a1f28;
  transition: background 0.1s; vertical-align: top;
}
.cal-week-cell:last-child { border-right: none; }
.cal-week-cell.today { background: rgba(212,245,66,0.04); }
.cal-week-cell.weekend { }
.cal-week-cell-date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900; color: #dce3ed; line-height: 1;
  margin-bottom: 2px;
}
.cal-week-cell.today .cal-week-cell-date { color: #d4f542; }
.cal-week-cell.weekend .cal-week-cell-date { color: #3a4555; }
.cal-week-cell-dow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #3a4555; margin-bottom: 8px;
}
.cal-week-cell.today .cal-week-cell-dow { color: #d4f542; }

/* ── List view ── */
.cal-list-view { padding: 4px 0; }
.cal-list-month-header {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #7a8a9b;
  padding: 16px 16px 6px; border-top: 1px solid #1a1f28;
}
.cal-list-month-header:first-child { border-top: none; padding-top: 8px; }
.cal-list-empty {
  padding: 8px 16px 12px;
  font-size: 12px; color: #3a4555; font-style: italic;
}
.cal-list-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.cal-list-item:hover { background: rgba(255,255,255,0.02); }
.cal-list-date-col {
  min-width: 60px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
}
.cal-list-date-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 900; line-height: 1; color: #dce3ed;
}
.cal-list-date-dow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #7a8a9b;
}
.cal-list-body { flex: 1; min-width: 0; }
.cal-list-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: #dce3ed; margin-bottom: 4px;
}
.cal-list-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cal-list-avatars { display: flex; margin-left: 4px; }
.cal-list-av {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #141820; margin-left: -5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7px; font-weight: 800;
}
.cal-list-av:first-child { margin-left: 0; }

/* ── Calendar main ── */
.cal-main {
  background: #141820; border: 1px solid #1f2530;
  border-radius: 14px; overflow: hidden;
}

/* Day-of-week header */
.cal-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #1f2530;
}
.cal-dow {
  padding: 10px 0; text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: #3a4555;
}
.cal-dow.weekend { color: #2a3040; }
.cal-dow.today-dow { color: #d4f542; }

/* Week rows */
.cal-grid { display: flex; flex-direction: column; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #1a1f28; }
.cal-week:last-child { border-bottom: none; }

/* Day cell */
.cal-cell {
  min-height: 90px; padding: 8px 8px 6px;
  border-right: 1px solid #1a1f28;
  position: relative; vertical-align: top;
  transition: background 0.1s; cursor: pointer;
}
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: rgba(255,255,255,0.05); }
.cal-cell.other-month { opacity: 0.3; }
.cal-cell.today { background: rgba(212,245,66,0.04); }
.cal-cell.today .cal-day-num {
  background: #d4f542; color: #000; border-radius: 50%;
  width: 22px; height: 22px; display: flex;
  align-items: center; justify-content: center;
}
.cal-day-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; color: #7a8a9b;
  margin-bottom: 5px;
  width: 22px; height: 22px; display: flex;
  align-items: center; justify-content: center;
}
.cal-cell.weekend .cal-day-num { color: #3a4555; }

/* Event pills */
.cal-events { display: flex; flex-direction: column; gap: 3px; }
.cal-event {
  display: flex; align-items: center; gap: 4px;
  border-radius: 4px; padding: 2px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden;
  cursor: pointer; transition: opacity 0.12s;
}
.cal-event:hover { opacity: 0.8; }
.cal-event.race     { background: rgba(239,68,68,0.18);  color: #ef4444; border-left: 2px solid #ef4444; }
.cal-event.test     { background: rgba(59,130,246,0.18); color: #60a5fa; border-left: 2px solid #3b82f6; }
.cal-event.endurance{ background: rgba(245,158,11,0.18); color: #f59e0b; border-left: 2px solid #f59e0b; }
.cal-event.trackday { background: rgba(34,197,94,0.18);  color: #22c55e; border-left: 2px solid #22c55e; }
.cal-event.meeting  { background: rgba(168,85,247,0.18); color: #c084fc; border-left: 2px solid #a855f7; }
.cal-event.other    { background: rgba(90,102,120,0.18); color: #8899aa; border-left: 2px solid #7a8a9b; }
.cal-event.cont     { opacity: 0.6; border-left-style: dashed; }
.cal-event-more {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; color: #7a8a9b;
  padding: 1px 6px; cursor: pointer;
}

/* Avatar color palette */
.av-blue   { background: rgba(59,130,246,0.25);  color: #60a5fa; }
.av-amber  { background: rgba(245,158,11,0.25);  color: #f59e0b; }
.av-purple { background: rgba(168,85,247,0.25);  color: #c084fc; }
.av-green  { background: rgba(34,197,94,0.25);   color: #22c55e; }
.av-red    { background: rgba(239,68,68,0.25);   color: #ef4444; }
.av-lime   { background: rgba(212,245,66,0.2);   color: #d4f542; }

/* Avatar wrapper — allows positioning the linked-account badge */
.cal-av-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
/* Small green badge shown on avatars of members with a linked account */
.cal-av-linked {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 1.5px solid var(--bg-card, #151e2d);
  font-size: 6px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Filter dot colors */
.dot-blue   { background: #3b82f6; }
.dot-amber  { background: #f59e0b; }
.dot-purple { background: #a855f7; }
.dot-green  { background: #22c55e; }
.dot-red    { background: #ef4444; }


/* ═══ EVENT MODAL — checkboxes, assignment, schedule ═══ */

/* Checkbox list */
.cal-checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.cal-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #dce3ed; cursor: pointer;
}
.cal-checkbox input[type="checkbox"] {
  accent-color: #d4f542; width: 15px; height: 15px; cursor: pointer;
}

/* Member assignment */
.cal-assign-list { display: flex; flex-direction: column; gap: 4px; }
.cal-assign-group { margin-bottom: 6px; }
.cal-assign-role-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #7a8a9b;
  padding: 4px 0 2px;
}
.cal-assign-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 3px 0;
}
.cal-assign-car {
  background: #0f1318; border: 1px solid #1f2530; border-radius: 6px;
  color: #dce3ed; font-family: 'Barlow', sans-serif;
}

/* Schedule editor */
.cal-schedule-items { display: flex; flex-direction: column; gap: 10px; }
.cal-schedule-day { display: flex; flex-direction: column; gap: 6px; }
.cal-schedule-day-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: #d4f542;
  padding: 4px 0 0;
}
.cal-schedule-item {
  display: flex; flex-direction: column; gap: 4px;
  background: #0f1318; border: 1px solid #1a1f28; border-radius: 8px;
  padding: 8px 10px;
}
.cal-sch-row-main {
  display: flex; align-items: center; gap: 6px;
}
.cal-schedule-item .form-input { padding: 6px 8px; font-size: 12px; }
.cal-sch-members {
  display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px;
}
.cal-sch-member-chip {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px; font-weight: 800; letter-spacing: 0.3px;
  cursor: pointer; opacity: 0.3; transition: opacity 0.12s, border-color 0.12s;
}
.cal-sch-member-chip:hover { opacity: 0.6; }
.cal-sch-member-chip.active { opacity: 1; border-color: rgba(255,255,255,0.25); }
.cal-sch-remove {
  background: transparent; border: none; cursor: pointer;
  color: #3a4555; font-size: 12px; padding: 2px 4px; border-radius: 4px;
  transition: color 0.15s;
}
.cal-sch-remove:hover { color: #ef4444; }
.cal-schedule-add-btn {
  background: transparent; border: 1px dashed #1f2530; border-radius: 6px;
  padding: 5px 10px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a8a9b; cursor: pointer;
  transition: all 0.15s; text-align: center;
}
.cal-schedule-add-btn:hover { border-color: #d4f542; color: #d4f542; }


/* ═══ EVENT DETAIL MODAL ═══ */

.cal-detail-header-info { margin-bottom: 14px; }
.cal-detail-type-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 8px;
}
.cal-detail-type-badge.race     { background: rgba(239,68,68,0.18); color: #ef4444; }
.cal-detail-type-badge.test     { background: rgba(59,130,246,0.18); color: #60a5fa; }
.cal-detail-type-badge.endurance{ background: rgba(245,158,11,0.18); color: #f59e0b; }
.cal-detail-type-badge.trackday { background: rgba(34,197,94,0.18);  color: #22c55e; }
.cal-detail-type-badge.meeting  { background: rgba(168,85,247,0.18); color: #c084fc; }
.cal-detail-type-badge.other    { background: rgba(90,102,120,0.18); color: #8899aa; }

.cal-detail-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: #dce3ed; margin-bottom: 4px;
}
.cal-detail-dates {
  font-size: 13px; color: #7a8a9b;
}
.cal-detail-track {
  font-size: 12px; color: #7a8a9b; margin-top: 4px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.3px;
}
.cal-detail-desc {
  font-size: 13px; color: #8899aa; margin-top: 8px; line-height: 1.5;
}

.cal-detail-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #1f2530; }
.cal-detail-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #7a8a9b; margin-bottom: 8px;
}

/* Cars badges in detail */
.cal-detail-cars { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-detail-car-badge {
  background: #1f2530; border: 1px solid #2a3040; border-radius: 6px;
  padding: 4px 10px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #dce3ed;
}

/* Members in detail */
.cal-detail-members { display: flex; flex-direction: column; gap: 8px; }
.cal-detail-member {
  display: flex; align-items: center; gap: 10px;
}
.cal-detail-member-name { font-size: 13px; font-weight: 600; color: #dce3ed; }
.cal-detail-member-role { font-size: 11px; color: #7a8a9b; }

/* Allocation table */
.cal-alloc-table {
  border: 1px solid #1f2530; border-radius: 8px; overflow: hidden;
  margin-top: 6px;
}
.cal-alloc-header, .cal-alloc-row {
  display: flex; align-items: center;
}
.cal-alloc-header {
  background: #0f1318; border-bottom: 1px solid #1f2530;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a8a9b;
}
.cal-alloc-row {
  border-bottom: 1px solid #1a1f28; font-size: 12px; color: #dce3ed;
}
.cal-alloc-row:last-child { border-bottom: none; }
.cal-alloc-name-col {
  flex: 1; padding: 7px 10px; display: flex; align-items: center; gap: 8px;
  min-width: 120px;
}
.cal-alloc-car-col {
  width: 90px; text-align: center; padding: 7px 6px;
  flex-shrink: 0;
}
.cal-alloc-check { color: #d4f542; font-weight: 700; }

/* Schedule in detail */
.cal-detail-schedule { display: flex; flex-direction: column; gap: 6px; }
.cal-detail-day-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #d4f542;
  padding: 6px 0 2px; margin-top: 4px;
}
.cal-detail-day-label:first-child { margin-top: 0; }
.cal-detail-schedule-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 6px;
  background: #0f1318;
}
.cal-detail-sch-time {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; color: #7a8a9b;
  min-width: 90px;
}
.cal-detail-sch-name { font-size: 13px; color: #dce3ed; flex: 1; }
.cal-detail-sch-members {
  display: flex; gap: 2px; margin-left: auto; flex-shrink: 0;
}
.cal-sch-detail-av {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7px; font-weight: 800;
}


/* ═══ TEAM MEMBER MODAL — color picker ═══ */

.cal-color-picker { display: flex; gap: 8px; }
.cal-color-opt {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, transform 0.1s;
}
.cal-color-opt:hover { transform: scale(1.1); }
.cal-color-opt.active { border-color: #dce3ed; transform: scale(1.15); }


/* ═══ RICHER EVENT CARDS ═══ */

.cal-ev-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-ev-car {
  font-size: 8px; opacity: 0.55; flex-shrink: 0;
  max-width: 44px; overflow: hidden; text-overflow: ellipsis;
}
.cal-ev-dots {
  display: inline-flex; gap: 1px; flex-shrink: 0; margin-left: auto;
}
.cal-ev-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}


/* ═══ MULTI-DAY EVENT VISUAL ═══ */

.cal-event.ev-start {
  border-radius: 4px 1px 1px 4px;
  margin-right: -4px; position: relative; z-index: 1;
}
.cal-event.ev-mid {
  border-radius: 1px;
  border-left-width: 0; margin-left: -2px; margin-right: -4px;
  padding-left: 8px;
}
.cal-event.ev-end {
  border-radius: 1px 4px 4px 1px;
  border-left-width: 0; margin-left: -2px;
  padding-left: 8px;
}
/* Override old .cont dim/dashed style for multi-day */
.cal-event.ev-start,
.cal-event.ev-mid,
.cal-event.ev-end {
  opacity: 1; border-left-style: solid;
}


/* ═══ DETAIL SLIDE-OVER PANEL ═══ */

.cal-detail-panel {
  position: fixed; top: 0; right: 0;
  width: 380px; height: 100vh;
  background: #141820; border-left: 1px solid #1f2530;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,0.4);
}
.cal-detail-panel.open { transform: translateX(0); }

.cal-detail-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #1f2530; flex-shrink: 0;
}
.cal-detail-panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #7a8a9b;
}
.cal-detail-panel-actions { display: flex; gap: 6px; align-items: center; }
.cal-detail-panel-close {
  background: transparent; border: none; cursor: pointer;
  color: #7a8a9b; font-size: 16px; padding: 4px;
  border-radius: 4px; transition: color 0.15s, background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.cal-detail-panel-close:hover { color: #dce3ed; background: rgba(255,255,255,0.05); }

.cal-detail-panel-body {
  flex: 1; overflow-y: auto; padding: 20px;
}
.cal-detail-panel-body::-webkit-scrollbar { width: 4px; }
.cal-detail-panel-body::-webkit-scrollbar-track { background: transparent; }
.cal-detail-panel-body::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 2px; }


/* ═══ SIDEBAR FILTER ═══ */

.cal-filter-item.filter-active {
  background: rgba(212,245,66,0.08); border-radius: 8px;
}
.cal-filter-item.filter-active .cal-filter-label { color: #d4f542; }

.cal-member-edit, .cal-member-invite {
  background: transparent; border: none; cursor: pointer;
  color: #3a4555; padding: 2px; border-radius: 4px;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; opacity: 0; line-height: 0;
}
.cal-member-edit .material-symbols-outlined,
.cal-member-invite .material-symbols-outlined {
  line-height: 1; display: block;
}
.cal-filter-item:hover .cal-member-edit,
.cal-filter-item:hover .cal-member-invite { opacity: 1; }
.cal-member-edit:hover { color: #d4f542; background: rgba(212,245,66,0.1); }
.cal-member-invite:hover { color: #60a5fa; background: rgba(96,165,250,0.1); }


/* ═══ FILTER BAR ═══ */

.cal-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin-bottom: 10px;
  background: rgba(212,245,66,0.06);
  border: 1px solid rgba(212,245,66,0.15);
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #d4f542;
}
.cal-filter-bar-label { color: #7a8a9b; margin-right: 2px; }
.cal-filter-bar-clear {
  background: transparent; border: none; cursor: pointer;
  color: #7a8a9b; font-size: 13px; padding: 2px 6px;
  border-radius: 4px; margin-left: auto;
  transition: color 0.15s;
}
.cal-filter-bar-clear:hover { color: #dce3ed; }


/* ═══ DRAG AND DROP ═══ */

.cal-event[draggable="true"] { cursor: grab; }
.cal-event.dragging { opacity: 0.35; cursor: grabbing; }
.cal-cell.drag-over { background: rgba(212,245,66,0.08) !important; }
.cal-cell.drag-over .cal-day-num { color: #d4f542; }
.cal-week-cell.drag-over { background: rgba(212,245,66,0.08) !important; }

/* Event dimming for sidebar filter */
.cal-event.dimmed { opacity: 0.15; }
.cal-list-item.dimmed { opacity: 0.15; }


/* ═══ LIGHT MODE OVERRIDES ═══ */

/* Navigation / header */
body.light-mode .cal-nav { background: #ffffff; border-color: #dde2ec; }
body.light-mode .cal-nav-btn { color: #8899aa; }
body.light-mode .cal-nav-btn:hover { background: #f0f3f8; color: #1a2030; }
body.light-mode .cal-month-title { color: #1a2030; }
body.light-mode .cal-nav-title-btn { color: #1a2030; }
body.light-mode .cal-nav-title-btn:hover { color: #6366f1; }
body.light-mode .cal-view-tabs { background: #ffffff; border-color: #dde2ec; }
body.light-mode .cal-view-tab { color: #8899aa; }
body.light-mode .cal-view-tab:hover { color: #1a2030; }
body.light-mode .cal-view-tab.active { background: #e8ecf2; color: #6366f1; }
body.light-mode .cal-year-picker { background: #ffffff; border-color: #dde2ec; box-shadow: 0 12px 36px rgba(0,0,0,0.1); }
body.light-mode .cal-yp-year { color: #1a2030; }
body.light-mode .cal-yp-year-clickable:hover { background: #f0f3f8; }
body.light-mode .cal-yp-year-btn { color: #8899aa; }
body.light-mode .cal-yp-year-btn:hover { color: #1a2030; background: #f0f3f8; }
body.light-mode .cal-yp-month { color: #6b7a8d; }
body.light-mode .cal-yp-month:hover { border-color: #dde2ec; color: #1a2030; background: #f8f9fc; }
body.light-mode .cal-yp-month.active { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.35); color: #6366f1; }
body.light-mode .cal-yp-today-btn { border-color: #dde2ec; color: #6b7a8d; }
body.light-mode .cal-yp-today-btn:hover { border-color: #6366f1; color: #6366f1; }

/* Sidebar */
body.light-mode .cal-panel { background: #ffffff; border-color: #dde2ec; }
body.light-mode .cal-sidebar-add-btn { border-color: #dde2ec; color: #8899aa; }
body.light-mode .cal-sidebar-add-btn:hover { border-color: #6366f1; color: #6366f1; }
body.light-mode .cal-filter-label { color: #1a2030; }
body.light-mode .cal-filter-sub { color: #8899aa; }
body.light-mode .cal-filter-check { border-color: #dde2ec; }
body.light-mode .cal-filter-item:not(.inactive) .cal-filter-check { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); color: #6366f1; }
body.light-mode .cal-role-label { color: #b0b8c4; }
body.light-mode .cal-upcoming-item { background: #f8f9fc; }
body.light-mode .cal-upcoming-day { color: #1a2030; }
body.light-mode .cal-upcoming-name { color: #1a2030; }

/* Grid */
body.light-mode .cal-main       { background: #ffffff; border-color: #dde2ec; }
body.light-mode .cal-dow-row    { border-bottom-color: #e8ecf2; }
body.light-mode .cal-dow         { color: #8899aa; }
body.light-mode .cal-dow.weekend { color: #b0bac8; }
body.light-mode .cal-dow.today-dow { color: #6366f1; }
body.light-mode .cal-cell        { border-color: #eef0f5; }
body.light-mode .cal-cell:hover  { background: rgba(99,102,241,0.06); }
body.light-mode .cal-cell.today  { background: rgba(99,102,241,0.05); }
body.light-mode .cal-cell.today .cal-day-num { background: #6366f1; color: #fff; }
body.light-mode .cal-week        { border-color: #eef0f5; }
body.light-mode .cal-day-num     { color: #7a8a9b; }
body.light-mode .cal-cell.weekend .cal-day-num { color: #b0bac8; }

/* Week view */
body.light-mode .cal-week-cell { border-color: #eef0f5; }
body.light-mode .cal-week-cell.today { background: rgba(99,102,241,0.05); }
body.light-mode .cal-week-cell-date { color: #1a2030; }
body.light-mode .cal-week-cell.today .cal-week-cell-date { color: #6366f1; }
body.light-mode .cal-week-cell.weekend .cal-week-cell-date { color: #b0bac8; }
body.light-mode .cal-week-cell-dow { color: #b0b8c4; }
body.light-mode .cal-week-cell.today .cal-week-cell-dow { color: #6366f1; }

/* List view */
body.light-mode .cal-list-month-header { color: #8899aa; border-color: #e8ecf2; }
body.light-mode .cal-list-empty { color: #b0b8c4; }
body.light-mode .cal-list-item:hover { background: rgba(0,0,0,0.02); }
body.light-mode .cal-list-date-num { color: #1a2030; }
body.light-mode .cal-list-name { color: #1a2030; }

/* Detail / event modal */
body.light-mode .cal-detail-name { color: #1a2030; }
body.light-mode .cal-detail-desc { color: #6b7a8d; }
body.light-mode .cal-detail-section { border-top-color: #e8ecf2; }
body.light-mode .cal-detail-section-title { color: #8899aa; }
body.light-mode .cal-detail-member-name { color: #1a2030; }
body.light-mode .cal-alloc-header { background: #f8f9fc; border-color: #dde2ec; }
body.light-mode .cal-alloc-row    { border-color: #eef0f5; color: #1a2030; }
body.light-mode .cal-alloc-table  { border-color: #dde2ec; }
body.light-mode .cal-alloc-check  { color: #6366f1; }
body.light-mode .cal-detail-schedule-item { background: #f8f9fc; }
body.light-mode .cal-detail-sch-name { color: #1a2030; }
body.light-mode .cal-detail-day-label { color: #6366f1; }
body.light-mode .cal-detail-car-badge { background: #eef0f5; border-color: #dde2ec; color: #1a2030; }

/* Schedule editor */
body.light-mode .cal-schedule-day-label { color: #6366f1; }
body.light-mode .cal-schedule-item { background: #f8f9fc; border-color: #e8ecf2; }
body.light-mode .cal-schedule-add-btn { border-color: #dde2ec; color: #8899aa; }
body.light-mode .cal-schedule-add-btn:hover { border-color: #6366f1; color: #6366f1; }
body.light-mode .cal-sch-remove { color: #b0b8c4; }
body.light-mode .cal-sch-role-btn { border-color: #dde2ec; color: #8899aa; }
body.light-mode .cal-sch-role-btn:hover { border-color: #b0b8c4; color: #1a2030; }
body.light-mode .cal-sch-role-btn.active { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.06); }


/* ═══ CHIP PICKER (cars & members search-select) ═══ */

.cal-chip-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.cal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #1f2530; border: 1px solid #2a3040; border-radius: 16px;
  padding: 3px 8px 3px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #dce3ed;
}
.cal-chip.cal-chip-sm { padding: 2px 6px 2px 7px; font-size: 10px; }
.cal-chip-name { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 11px; }
.cal-chip.av-blue, .cal-chip.av-amber, .cal-chip.av-purple,
.cal-chip.av-green, .cal-chip.av-red,  .cal-chip.av-lime { border-color: transparent; }
.cal-chip-remove {
  background: transparent; border: none; cursor: pointer;
  color: inherit; opacity: 0.5; font-size: 10px; padding: 0 0 0 2px;
  line-height: 1; transition: opacity 0.15s;
}
.cal-chip-remove:hover { opacity: 1; }
.cal-picker-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cal-picker-row .form-input { font-size: 12px; }


/* ═══ MEMBER ROWS IN EVENT MODAL ═══ */

.cal-member-rows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 2px; }
.cal-member-row {
  display: flex; align-items: center; gap: 8px;
  background: #0f1318; border: 1px solid #1a1f28; border-radius: 8px;
  padding: 6px 8px;
}
.cal-member-row-name {
  font-size: 12px; font-weight: 600; color: #dce3ed;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-member-row-remove {
  background: transparent; border: none; cursor: pointer;
  color: #3a4555; font-size: 11px; padding: 2px 4px; border-radius: 4px;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.cal-member-row-remove:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* Role badges */
.cal-role-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; flex-shrink: 0; white-space: nowrap;
}
.cal-role-badge.role-driver   { background: rgba(239,68,68,0.15);  color: #ef4444; }
.cal-role-badge.role-engineer { background: rgba(59,130,246,0.15); color: #60a5fa; }
.cal-role-badge.role-mechanic { background: rgba(245,158,11,0.15); color: #f59e0b; }
.cal-role-badge.role-other    { background: rgba(90,102,120,0.15); color: #8899aa; }


/* ═══ SCHEDULE ITEM — ROLE FILTERS + MEMBER SEARCH ═══ */

.cal-sch-member-section { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid #1a1f28; margin-top: 2px; }
.cal-sch-role-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-sch-role-btn {
  background: transparent; border: 1px solid #2a3040; border-radius: 5px;
  padding: 3px 9px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a8a9b; cursor: pointer;
  transition: all 0.12s;
}
.cal-sch-role-btn:hover { border-color: #7a8a9b; color: #dce3ed; }
.cal-sch-role-btn.active { border-color: #d4f542; color: #d4f542; background: rgba(212,245,66,0.08); }

.cal-sch-chips-and-search { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.cal-sch-chip-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cal-sch-search-wrap { position: relative; }
.cal-sch-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
  background: #141820; border: 1px solid #2a3040; border-radius: 8px;
  min-width: 220px; max-height: 180px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.cal-sch-result-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; transition: background 0.1s;
  font-size: 12px; color: #dce3ed;
}
.cal-sch-result-item:hover { background: rgba(255,255,255,0.05); }
.cal-sch-no-results { padding: 8px 12px; font-size: 12px; color: #7a8a9b; }


/* ═══ DETAIL MODAL — SCHEDULE LOCATION ═══ */

.cal-detail-sch-location {
  font-size: 11px; color: #8899aa;
  background: #0f1318; border: 1px solid #1a1f28;
  border-radius: 4px; padding: 2px 7px; flex-shrink: 0;
}


/* ═══ LIGHT MODE ADDITIONS ═══ */

body.light-mode .cal-chip             { background: #eef0f5; border-color: #dde2ec; color: #1a2030; }
body.light-mode .cal-member-row       { background: #f8f9fc; border-color: #dde2ec; }
body.light-mode .cal-member-row-name  { color: #1a2030; }
body.light-mode .cal-sch-search-results { background: #ffffff; border-color: #dde2ec; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
body.light-mode .cal-sch-result-item  { color: #1a2030; }
body.light-mode .cal-sch-result-item:hover { background: rgba(0,0,0,0.04); }
body.light-mode .cal-sch-member-section { border-top-color: #e8ecf2; }
body.light-mode .cal-detail-sch-location { background: #f8f9fc; border-color: #dde2ec; color: #7a8a9b; }
body.light-mode .cal-assign-car { background: #f0f3f8; border-color: #dde2ec; color: #1a2030; }
body.light-mode .cal-color-opt.active { border-color: #1a2030; }

/* ═══ LIGHT MODE — NEW ELEMENTS ═══ */

/* Detail panel */
body.light-mode .cal-detail-panel { background: #ffffff; border-left-color: #dde2ec; box-shadow: -8px 0 30px rgba(0,0,0,0.08); }
body.light-mode .cal-detail-panel-header { border-bottom-color: #e8ecf2; }
body.light-mode .cal-detail-panel-close { color: #8899aa; }
body.light-mode .cal-detail-panel-close:hover { color: #1a2030; background: rgba(0,0,0,0.04); }
body.light-mode .cal-detail-panel-body::-webkit-scrollbar-thumb { background: #dde2ec; }

/* Filter bar */
body.light-mode .cal-filter-bar { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); color: #6366f1; }
body.light-mode .cal-filter-bar-label { color: #8899aa; }
body.light-mode .cal-filter-bar-clear { color: #8899aa; }
body.light-mode .cal-filter-bar-clear:hover { color: #1a2030; }

/* Sidebar filter active */
body.light-mode .cal-filter-item.filter-active { background: rgba(99,102,241,0.06); }
body.light-mode .cal-filter-item.filter-active .cal-filter-label { color: #6366f1; }
body.light-mode .cal-member-edit:hover { color: #6366f1; background: rgba(99,102,241,0.08); }
body.light-mode .cal-member-invite:hover { color: #3b82f6; background: rgba(59,130,246,0.08); }

/* Drag over */
body.light-mode .cal-cell.drag-over { background: rgba(99,102,241,0.08) !important; }
body.light-mode .cal-cell.drag-over .cal-day-num { color: #6366f1; }
body.light-mode .cal-week-cell.drag-over { background: rgba(99,102,241,0.08) !important; }

/* ══ TEAM CATEGORY MULTI-SELECT FILTER ══════════════════════════════════════ */

.team-cat-filter-wrap {
  position: relative; margin-bottom: 10px;
}
.team-cat-multi {
  position: relative;
}
.team-cat-toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-height: 32px; padding: 4px 28px 4px 8px;
  background: #141820; border: 1px solid #2a3545; border-radius: 8px;
  cursor: pointer; position: relative;
  transition: border-color 0.15s;
}
.team-cat-toggle::after {
  content: '';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #5a6678;
  pointer-events: none;
}
.team-cat-toggle:hover { border-color: #3a4d60; }
.team-cat-placeholder {
  font-family: 'Barlow', sans-serif;
  font-size: 11px; color: #3a4555;
}
.team-cat-pill {
  display: flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(255,255,255,0.07);
  color: #dce3ed;
  white-space: nowrap;
}
.team-cat-pill-x {
  cursor: pointer; color: rgba(255,255,255,0.4); font-size: 9px;
  margin-left: 1px; line-height: 1;
  transition: color 0.12s;
}
.team-cat-pill-x:hover { color: #ef4444; }
.team-cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}

.team-cat-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px;
  background: #141820; border: 1px solid #2a3545; border-radius: 8px;
  z-index: 200; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 200px; overflow-y: auto;
}
.team-cat-dropdown.open { display: block; }
.team-cat-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-family: 'Barlow', sans-serif; font-size: 12px; color: #9aacbd;
  transition: background 0.12s, color 0.12s;
}
.team-cat-opt:hover { background: rgba(255,255,255,0.05); color: #dce3ed; }
.team-cat-opt.selected { color: #dce3ed; }
.team-cat-opt.selected .team-cat-opt-check { opacity: 1; }
.team-cat-opt-check {
  margin-left: auto; font-size: 10px; color: #d4f542; opacity: 0;
  transition: opacity 0.12s;
}
.team-cat-opt-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.team-cat-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px; margin-top: 4px;
}
.team-cat-clear {
  background: transparent; border: none; cursor: pointer;
  font-family: 'Barlow', sans-serif; font-size: 10px; color: #3a4555;
  padding: 2px 4px; transition: color 0.12s;
}
.team-cat-clear:hover { color: #7a8a9b; }
.team-cat-count {
  font-family: 'Barlow', sans-serif; font-size: 10px; color: #3a4555;
}

/* Light mode */
body.light-mode .team-cat-toggle { background: #f8f9fc; border-color: #dde2ec; }
body.light-mode .team-cat-toggle:hover { border-color: #c0c8d8; }
body.light-mode .team-cat-toggle::after { border-top-color: #8899aa; }
body.light-mode .team-cat-placeholder { color: #aab4c0; }
body.light-mode .team-cat-pill { background: rgba(0,0,0,0.05); color: #1a2030; }
body.light-mode .team-cat-dropdown { background: #ffffff; border-color: #dde2ec; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
body.light-mode .team-cat-opt { color: #6a7a8b; }
body.light-mode .team-cat-opt:hover { background: rgba(0,0,0,0.04); color: #1a2030; }
body.light-mode .team-cat-opt.selected { color: #1a2030; }
body.light-mode .team-cat-opt-check { color: #6366f1; }
body.light-mode .team-cat-clear { color: #aab4c0; }
body.light-mode .team-cat-clear:hover { color: #6a7a8b; }
body.light-mode .team-cat-count { color: #aab4c0; }

.cal-my-events-btn {
  margin-top: 6px; width: 100%;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(212,245,66,0.07); border: 1px solid rgba(212,245,66,0.2);
  color: #8a9ab0; font-size: 11px; font-family: 'Barlow', sans-serif;
  cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cal-my-events-btn:hover { background: rgba(212,245,66,0.12); color: #d4f542; border-color: rgba(212,245,66,0.4); }
.cal-my-events-btn.active { background: rgba(212,245,66,0.15); color: #d4f542; border-color: rgba(212,245,66,0.5); }
body.light-mode .cal-my-events-btn { background: rgba(80,120,200,0.05); border-color: rgba(80,120,200,0.2); color: #6a7a8b; }
body.light-mode .cal-my-events-btn:hover, body.light-mode .cal-my-events-btn.active { background: rgba(80,120,200,0.1); color: #3d5a8a; border-color: rgba(80,120,200,0.4); }

/* ══ CHAMPIONSHIPS SIDEBAR ═══════════════════════════════════════════════════ */

.cal-champ-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  margin-bottom: 4px;
}
.cal-champ-item:hover { background: rgba(255,255,255,0.04); border-color: #2a3545; }
.cal-champ-color-bar {
  width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0;
  min-height: 20px;
}
.cal-champ-info { min-width: 0; flex: 1; }
.cal-champ-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; color: #dce3ed;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-champ-meta {
  font-family: 'Barlow', sans-serif; font-size: 10px; color: #5a6a7b;
  margin-top: 1px;
}
.cal-champ-del {
  flex-shrink: 0; background: transparent; border: none;
  color: #3a4555; font-size: 11px; cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
  opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.cal-champ-item:hover .cal-champ-del { opacity: 1; }
.cal-champ-del:hover { color: #ef4444; }

/* Championship modal */
.champ-round-row {
  display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px;
}
.champ-round-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; color: #5a6a7b;
  text-align: center; padding: 4px; min-width: 28px;
  background: rgba(255,255,255,0.04); border-radius: 6px;
  margin-top: 6px; flex-shrink: 0;
}
.champ-round-name-input {
  flex: 0 0 130px; min-width: 0;
}
.champ-round-pick { flex: 1; min-width: 0; }
.champ-round-new-wrap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.champ-round-new-row {
  display: flex; gap: 4px;
}
.champ-round-toggle {
  flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(99,130,180,0.3); background: rgba(99,130,180,0.08);
  color: #8aaad0; margin-top: 4px;
  transition: background 0.12s, color 0.12s;
}
.champ-round-toggle:hover { background: rgba(99,130,180,0.18); color: #aac4e8; }
.champ-round-toggle.mode-new { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); color: #6dba88; }
.champ-round-toggle.mode-new:hover { background: rgba(34,197,94,0.18); color: #88d4a0; }

/* Championship badge on calendar cells */
.cal-champ-badge {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; vertical-align: middle;
}

/* Light mode */
body.light-mode .cal-champ-item:hover { background: rgba(0,0,0,0.03); border-color: #dde2ec; }
body.light-mode .cal-champ-name { color: #1a2030; }
body.light-mode .cal-champ-meta { color: #8899aa; }
body.light-mode .champ-round-num { background: rgba(0,0,0,0.04); color: #6a7a8b; }

/* ══ SESSION EDITOR IN EVENT MODAL ═══════════════════════════════════════════ */

.cal-session-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.cal-session-row {
  display: grid;
  grid-template-columns: 1fr 90px 62px 8px 62px 22px;
  gap: 6px; align-items: center;
}
.cal-ses-name,
.cal-ses-type,
.cal-ses-start,
.cal-ses-end {
  font-family: 'Barlow', sans-serif; font-size: 12px;
  background: #0f1419; border: 1px solid #2a3545; border-radius: 6px;
  color: #dce3ed; padding: 5px 8px;
  width: 100%;
}
.cal-ses-name:focus, .cal-ses-type:focus, .cal-ses-start:focus, .cal-ses-end:focus {
  outline: none; border-color: #4ac8a4;
}
.cal-ses-type option { background: #141820; }
.cal-ses-remove {
  background: transparent; border: none; cursor: pointer;
  color: #3a4555; font-size: 13px; padding: 2px 4px; border-radius: 4px;
  transition: color 0.12s; display: flex; align-items: center; justify-content: center;
}
.cal-ses-remove:hover { color: #ef4444; }
.cal-session-day-group { margin-bottom: 8px; }
.cal-session-day-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #3a4555;
  margin-bottom: 4px;
}
.cal-session-add-btn {
  background: transparent; border: 1px dashed #2a3545; border-radius: 6px;
  color: #5a6a7b; font-size: 11px; cursor: pointer;
  padding: 4px 10px; width: 100%;
  font-family: 'Barlow', sans-serif;
  transition: border-color 0.15s, color 0.15s;
}
.cal-session-add-btn:hover { border-color: #4ac8a4; color: #4ac8a4; }

/* Detail panel sessions */
.cal-detail-sessions {
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
}
.cal-detail-session-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.cal-detail-session-type-badge {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden; font-size: 0;
}
.cal-detail-session-name {
  font-family: 'Barlow', sans-serif; font-size: 12px; color: #9aacbd;
  flex: 1; min-width: 0;
}
.cal-detail-session-time {
  font-family: 'Barlow', sans-serif; font-size: 11px; color: #5a6a7b;
}

/* Light mode */
body.light-mode .cal-ses-name,
body.light-mode .cal-ses-type,
body.light-mode .cal-ses-start,
body.light-mode .cal-ses-end { background: #ffffff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .cal-session-add-btn { border-color: #dde2ec; color: #8899aa; }
body.light-mode .cal-session-add-btn:hover { border-color: #4ac8a4; color: #4ac8a4; }
body.light-mode .cal-detail-session-item { background: rgba(0,0,0,0.02); }
body.light-mode .cal-detail-session-name { color: #4a5568; }

/* ══ EVENT MODAL — TWO-COLUMN LAYOUT ════════════════════════════════════════ */

.cal-ev-modal-body {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0 !important;
  padding: 0 !important;
  overflow-y: hidden !important;
}

.cal-ev-col {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100dvh / var(--zoom-scale, 1) - 48px - 57px - 57px);
}
.cal-ev-col::-webkit-scrollbar       { width: 4px; }
.cal-ev-col::-webkit-scrollbar-thumb { background: #1f2530; border-radius: 2px; }

.cal-ev-col-left  { flex: 1 1 0; min-width: 280px; border-right: 1px solid #1f2530; }
.cal-ev-col-right { flex: 1.4 1 0; min-width: 320px; }

/* Collapse to single column when modal is narrow (small screens) */
@media (max-width: 640px) {
  .cal-ev-modal-body {
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  .cal-ev-col {
    padding: 0;
    max-height: none;
    overflow-y: visible;
  }
  .cal-ev-col-left { border-right: none; border-bottom: 1px solid #1f2530; padding-bottom: 16px; }
}

body.light-mode .cal-ev-col-left { border-right-color: #e8ecf2; }
body.light-mode .cal-ev-col::-webkit-scrollbar-thumb { background: #dde2ec; }

/* ── Template toolbar ────────────────────────────────────────────────────── */
.cal-tpl-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 20px;
  border-bottom: 1px solid #1a2434;
  background: rgba(255,255,255,0.01);
}

.cal-tpl-load-wrap { position: relative; }

.cal-tpl-load-btn,
.cal-tpl-save-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  border-radius: 5px; padding: 4px 10px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cal-tpl-load-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e2d40; color: #7a8fa8;
}
.cal-tpl-load-btn:hover { background: rgba(255,255,255,0.07); border-color: #2e4060; color: #a0b4cc; }

.cal-tpl-save-btn {
  background: rgba(74,200,164,0.06);
  border: 1px solid rgba(74,200,164,0.2); color: #4ac8a4;
}
.cal-tpl-save-btn:hover { background: rgba(74,200,164,0.12); border-color: rgba(74,200,164,0.4); }

/* Picker dropdown */
.cal-tpl-picker {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  min-width: 220px; max-height: 260px; overflow-y: auto;
  background: #0f1620; border: 1px solid #1e2d40; border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding: 4px;
}
.cal-tpl-picker.open { display: block; }
.cal-tpl-picker::-webkit-scrollbar       { width: 4px; }
.cal-tpl-picker::-webkit-scrollbar-thumb { background: #1f2530; border-radius: 2px; }

.cal-tpl-empty {
  padding: 12px 10px; font-size: 11px; color: #4a5a6b;
  text-align: center; line-height: 1.5;
}

.cal-tpl-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 5px; cursor: pointer;
  transition: background 0.12s;
}
.cal-tpl-item:hover { background: rgba(255,255,255,0.06); }

.cal-tpl-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600; color: #c8d4e0;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cal-tpl-del {
  background: none; border: none; cursor: pointer;
  color: #3a4a5b; font-size: 11px; padding: 1px 4px; border-radius: 3px;
  flex-shrink: 0; margin-left: 6px; transition: color 0.12s;
}
.cal-tpl-del:hover { color: #ef4444; }

/* Light mode */
body.light-mode .cal-tpl-bar           { border-bottom-color: #e8ecf2; background: rgba(0,0,0,0.01); }
body.light-mode .cal-tpl-load-btn      { border-color: #d0d9e8; color: #6a7890; background: #f5f7fa; }
body.light-mode .cal-tpl-load-btn:hover { background: #e8ecf4; }
body.light-mode .cal-tpl-picker        { background: #ffffff; border-color: #d8e0ec; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light-mode .cal-tpl-item:hover    { background: #f0f4fb; }
body.light-mode .cal-tpl-name          { color: #2a3848; }
body.light-mode .cal-tpl-empty         { color: #8a9ab0; }
body.light-mode .cal-tpl-del           { color: #b0bcd0; }