/**
 * campagne.css
 * Vue calendrier campagne Radio Control
 */

/* ══════════════════════════════
   CONTENEUR CALENDRIER
══════════════════════════════ */
.rts-calendar-section {
  background: var(--rts-white);
  border: 0.5px solid var(--rts-border);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

/* ── Toolbar ── */
.rts-calendar-toolbar {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--rts-border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rts-calendar-toolbar__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rts-topbar);
  flex: 1;
}

/* ── Navigation mois/semaine ── */
.rts-calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rts-calendar-nav__btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 0.5px solid var(--rts-border);
  background: var(--rts-grey-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--rts-grey);
  transition: background 0.12s;
}
.rts-calendar-nav__btn:hover { background: var(--rts-border); }
.rts-calendar-nav__label { font-size: 11px; color: var(--rts-grey); }

/* ── Toggle vue mois / semaine ── */
.rts-view-toggle {
  display: flex;
  border: 0.5px solid var(--rts-border);
  border-radius: 4px;
  overflow: hidden;
}
.rts-view-toggle__btn {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--rts-grey);
  cursor: pointer;
  background: var(--rts-grey-light);
  border: none;
  transition: background 0.12s, color 0.12s;
}
.rts-view-toggle__btn:hover { background: var(--rts-border); }
.rts-view-toggle__btn--active {
  background: var(--rts-red);
  color: #fff;
}

/* ── Onglets zones de diffusion ── */
.rts-zone-tabs {
  display: flex;
  padding: 0 16px;
  border-bottom: 0.5px solid var(--rts-border);
  list-style: none;
  margin: 0;
  overflow-x: auto;
}
.rts-zone-tabs__item a {
  display: block;
  font-size: 11px;
  padding: 8px 14px;
  color: var(--rts-grey);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  white-space: nowrap;
  transition: color 0.12s;
}
.rts-zone-tabs__item a:hover { color: var(--rts-red); }
.rts-zone-tabs__item.is-active a {
  color: var(--rts-red);
  border-bottom-color: var(--rts-red);
  font-weight: 500;
}

/* ══════════════════════════════
   GRILLE CALENDRIER
══════════════════════════════ */
.rts-calendar-grid {
  padding: 12px 16px;
}

/* En-têtes jours */
.rts-calendar-days-header {
  display: grid;
  grid-template-columns: 36px repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}
.rts-calendar-day-label {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: #aaa;
  padding: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Ligne de semaine */
.rts-calendar-row {
  display: grid;
  grid-template-columns: 36px repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
  align-items: start;
}
.rts-calendar-week-num {
  font-size: 10px;
  color: #ccc;
  text-align: right;
  padding: 4px 4px 0 0;
}

/* Cellule de jour */
.rts-calendar-cell {
  border-radius: 4px;
  min-height: 28px;
  background: var(--rts-grey-light);
  padding: 3px 4px;
}
.rts-calendar-cell--active {
  background: var(--rts-white);
  border: 0.5px solid var(--rts-border);
}
.rts-calendar-cell--start {
  background: var(--rts-red-light);
  border: 0.5px solid rgba(200,21,27,0.3);
}
.rts-calendar-cell--end {
  background: #EFEFEF;
  border: 0.5px solid #ddd;
}
.rts-calendar-cell__date {
  font-size: 10px;
  font-weight: 500;
  color: #aaa;
  margin-bottom: 2px;
  display: block;
}
.rts-calendar-cell--start .rts-calendar-cell__date { color: var(--rts-red); }
.rts-calendar-cell__event-label {
  font-size: 9px;
  color: var(--rts-red);
  font-style: italic;
  display: block;
}

/* ── Tags de spots ── */
.rts-spot-tag {
  display: block;
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 2px;
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rts-spot-tag--ok    { background: var(--spot-ok-bg);    color: var(--spot-ok); }
.rts-spot-tag--err   { background: var(--spot-err-bg);   color: var(--spot-err); }
.rts-spot-tag--reprg { background: var(--spot-reprg-bg); color: var(--spot-reprg); }
.rts-spot-tag--none  { background: var(--spot-none-bg);  color: var(--spot-none); font-style: italic; }

/* ══════════════════════════════
   LÉGENDE
══════════════════════════════ */
.rts-calendar-legend {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 0.5px solid var(--rts-border);
  flex-wrap: wrap;
}
.rts-calendar-legend__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--rts-grey);
}
.rts-calendar-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.rts-calendar-legend__dot--ok    { background: var(--spot-ok-bg);    border: 1px solid var(--spot-ok); }
.rts-calendar-legend__dot--err   { background: var(--spot-err-bg);   border: 1px solid var(--spot-err); }
.rts-calendar-legend__dot--reprg { background: var(--spot-reprg-bg); border: 1px solid var(--spot-reprg); }
.rts-calendar-legend__dot--none  { background: var(--spot-none-bg);  border: 1px solid #ccc; }
.rts-calendar-legend__dot--start { background: var(--rts-red-light); border: 1px solid var(--rts-red); }

/* ══════════════════════════════
   VUE SEMAINE
══════════════════════════════ */
.rts-week-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 3px;
  padding: 12px 16px;
}
.rts-week-grid__time {
  font-size: 10px;
  color: #aaa;
  text-align: right;
  padding-right: 8px;
  padding-top: 2px;
}
.rts-week-grid__cell {
  border-radius: 3px;
  min-height: 28px;
  background: var(--rts-grey-light);
  position: relative;
}
.rts-week-grid__spot {
  border-radius: 3px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  overflow: hidden;
  padding: 2px 4px;
  text-align: center;
  line-height: 1.2;
}
.rts-week-grid__spot--ok    { background: var(--spot-ok);    color: #fff; }
.rts-week-grid__spot--err   { background: var(--spot-err);   color: #fff; }
.rts-week-grid__spot--reprg { background: var(--spot-reprg); color: #fff; }