/* ============================================================
   FullCalendar 5 — Ant Design 5 Notice Calendar Theme Override
   ============================================================
   Applies Ant Design 5 visual style to FullCalendar components.
   Reference: https://ant.design/components/calendar (Notice Calendar)
   ============================================================ */

/* ── CSS Variables (Ant Design 5 tokens) ── */
:root {
  --antd-cal-primary: #1677ff;
  --antd-cal-primary-hover: #4096ff;
  --antd-cal-primary-bg: #e6f4ff;
  --antd-cal-text: rgba(0, 0, 0, 0.88);
  --antd-cal-text-secondary: rgba(0, 0, 0, 0.45);
  --antd-cal-text-tertiary: rgba(0, 0, 0, 0.25);
  --antd-cal-border: #f0f0f0;
  --antd-cal-bg: #ffffff;
  --antd-cal-bg-hover: rgba(0, 0, 0, 0.04);
  --antd-cal-success: #52c41a;
  --antd-cal-warning: #faad14;
  --antd-cal-error: #ff4d4f;
  --antd-cal-radius: 8px;
  --antd-cal-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --antd-cal-shadow: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05);
}

/* ── Calendar container ── */
.fc {
  font-family: var(--antd-cal-font) !important;
  color: var(--antd-cal-text);
  background: var(--antd-cal-bg);
  border-radius: var(--antd-cal-radius);
}

/* ── Header / Toolbar ── */
.fc .fc-toolbar {
  padding: 12px 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--antd-cal-border);
  background: var(--antd-cal-bg);
  border-radius: var(--antd-cal-radius) var(--antd-cal-radius) 0 0;
}

.fc .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--antd-cal-text) !important;
}

/* ── Toolbar buttons (prev/next/today + view switcher) ── */
.fc .fc-button {
  background: var(--antd-cal-bg) !important;
  border: 1px solid #d9d9d9 !important;
  color: var(--antd-cal-text) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 4px 12px !important;
  height: 32px !important;
  line-height: 22px !important;
  box-shadow: none !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  font-family: var(--antd-cal-font) !important;
}

.fc .fc-button:hover {
  color: var(--antd-cal-primary) !important;
  border-color: var(--antd-cal-primary) !important;
  background: var(--antd-cal-bg) !important;
}

.fc .fc-button:focus {
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1) !important;
}

.fc .fc-button-active,
.fc .fc-button.fc-button-active {
  background: var(--antd-cal-primary) !important;
  border-color: var(--antd-cal-primary) !important;
  color: #fff !important;
}

.fc .fc-button-active:hover,
.fc .fc-button.fc-button-active:hover {
  background: var(--antd-cal-primary-hover) !important;
  border-color: var(--antd-cal-primary-hover) !important;
  color: #fff !important;
}

/* Button group (view switcher) — connected borders */
.fc .fc-button-group > .fc-button {
  border-radius: 0 !important;
}

.fc .fc-button-group > .fc-button:first-child {
  border-radius: 6px 0 0 6px !important;
}

.fc .fc-button-group > .fc-button:last-child {
  border-radius: 0 6px 6px 0 !important;
}

/* Prev/Next icon buttons */
.fc .fc-prev-button,
.fc .fc-next-button {
  padding: 4px 8px !important;
}

/* Today button */
.fc .fc-today-button {
  text-transform: capitalize !important;
}

.fc .fc-today-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── Table / Grid ── */
.fc .fc-scrollgrid {
  border: none !important;
  border-radius: 0 0 var(--antd-cal-radius) var(--antd-cal-radius);
  overflow: hidden;
}

.fc .fc-scrollgrid-section > * {
  border: none !important;
}

.fc td,
.fc th {
  border-color: var(--antd-cal-border) !important;
}

/* ── Column headers (Mon, Tue, ...) ── */
.fc .fc-col-header-cell {
  background: #fafafa !important;
  border-bottom: 1px solid var(--antd-cal-border) !important;
  padding: 8px 0 !important;
}

.fc .fc-col-header-cell-cushion {
  color: var(--antd-cal-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
}

/* ── Day cells (month view) ── */
.fc .fc-daygrid-day {
  transition: background 0.2s ease !important;
  min-height: 100px !important;
}

.fc .fc-daygrid-day:hover {
  background: var(--antd-cal-bg-hover) !important;
}

/* Day number */
.fc .fc-daygrid-day-number {
  font-size: 14px !important;
  color: var(--antd-cal-text) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  line-height: 24px !important;
}

/* Today cell */
.fc .fc-day-today {
  background: transparent !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--antd-cal-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 4px 8px !important;
  font-weight: 600 !important;
}

/* Other month days */
.fc .fc-day-other .fc-daygrid-day-number {
  color: var(--antd-cal-text-tertiary) !important;
}

/* ── Events — Ant Design Notice Calendar dot + text style ── */

/* Eventos del calendario: permitir que el inline style de FullCalendar 5
 * (background-color: X; border-color: X) tome efecto. ANTES tenia
 * "background: transparent !important; border: none !important;" que pisaba
 * el inline style y dejaba todos los eventos sin color → el dot del ::before
 * tomaba currentColor (texto oscuro) → todos los eventos se veian gris.
 * Sin el !important, el inline style con event.color = #5DADE2/#E6C84E/#A8D5BA
 * gana y los eventos se distinguen visualmente por estatus.
 */
.fc .fc-daygrid-event,
.fc .fc-daygrid-dot-event,
.fc .fc-daygrid-block-event {
  border-radius: 4px !important;
  padding: 1px 4px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  line-height: 22px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
}

/* Remove the colored bar from block events */
.fc .fc-daygrid-block-event .fc-event-main {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Hide the default colored left-border of block events */
.fc .fc-daygrid-block-event .fc-event-main-frame {
  display: flex !important;
  align-items: center !important;
}

.fc .fc-daygrid-event:hover,
.fc .fc-daygrid-dot-event:hover {
  background: var(--antd-cal-bg-hover) !important;
  border-radius: 4px !important;
}

/* Event dot — Ant Design Badge dot (colored circle)
   FullCalendar sets border-color as inline style on the dot element.
   We use border-width + border-style to shape it, letting FC's inline border-color win. */
.fc .fc-daygrid-event-dot {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  border-width: 4px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  margin: 0 8px 0 0 !important;
  display: inline-block !important;
  box-sizing: content-box !important;
  /* FullCalendar 5 setea border-color como inline style en el dot (derivado
     del event.color / event.borderColor). Sin !important el inline gana —
     antes lo teniamos con !important y el fallback CSS var caia a
     currentColor (texto oscuro) → todos los dots se veian negros.
     Mantener como fallback para eventos sin color asignado. */
  border-color: var(--fc-event-border-color, var(--fc-event-bg-color, currentColor));
}

/* Ensure block events also show a dot before the title */
.fc .fc-daygrid-block-event .fc-event-main::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  /* Antes: currentColor (color del texto = oscuro) → todos los dots iguales.
     Ahora: var del evento → cada estatus su color (azul/amarillo/verde). */
  background: var(--fc-event-bg-color, var(--fc-event-border-color, currentColor)) !important;
}

/* If the event already has a dot element, hide the pseudo-dot */
.fc .fc-daygrid-dot-event .fc-event-main::before {
  display: none !important;
}

/* ============================================================
 * ColectaCarga - Calendario de Mantenimientos: color del dot por estatus.
 * Las reglas globales arriba pintan el dot con currentColor (texto oscuro),
 * por eso todos los eventos se veian gris. Estas reglas usan classNames
 * asignadas desde ColectaCargaMantenimientoCalendarReadController:
 *   - fc-cc-mant-abierto    → azul   (#5DADE2)
 *   - fc-cc-mant-procesando → amarillo (#E6C84E)
 *   - fc-cc-mant-finalizada → verde  (#A8D5BA)
 *   - fc-cc-mant-default    → gris   (#B0B0B0)
 * Se cubren ambos casos: dot-event (.fc-daygrid-event-dot) y block-event
 * (::before del .fc-event-main).
 * ============================================================ */
.fc-cc-mant-abierto .fc-daygrid-event-dot,
.fc-cc-mant-abierto.fc-daygrid-event .fc-daygrid-event-dot,
.fc-cc-mant-abierto .fc-event-main::before {
  background-color: #5DADE2 !important;
  border-color: #5DADE2 !important;
}

.fc-cc-mant-procesando .fc-daygrid-event-dot,
.fc-cc-mant-procesando.fc-daygrid-event .fc-daygrid-event-dot,
.fc-cc-mant-procesando .fc-event-main::before {
  background-color: #E6C84E !important;
  border-color: #E6C84E !important;
}

.fc-cc-mant-finalizada .fc-daygrid-event-dot,
.fc-cc-mant-finalizada.fc-daygrid-event .fc-daygrid-event-dot,
.fc-cc-mant-finalizada .fc-event-main::before {
  background-color: #A8D5BA !important;
  border-color: #A8D5BA !important;
}

.fc-cc-mant-default .fc-daygrid-event-dot,
.fc-cc-mant-default.fc-daygrid-event .fc-daygrid-event-dot,
.fc-cc-mant-default .fc-event-main::before {
  background-color: #B0B0B0 !important;
  border-color: #B0B0B0 !important;
}

/* Event title text — dark text, not colored */
.fc .fc-event-title,
.fc .fc-event-title-container {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--antd-cal-text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fc .fc-event-time {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--antd-cal-text-secondary) !important;
  flex-shrink: 0 !important;
}

/* NO forzar margin:0 en el harness: FullCalendar 5 usa un margin-top inline
 * (calculado) en los harness de eventos de un solo día para empujarlos DEBAJO
 * de la banda absoluta del evento multi-día. Pisarlo con margin:0 !important
 * hacía que la falta/incidencia de un día quedara en la misma línea que la
 * banda (incapacidad, vacaciones) y se encimaran. */

/* "More" link — Ant Design style */
.fc .fc-daygrid-more-link {
  color: var(--antd-cal-primary) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  padding: 2px 4px !important;
}

.fc .fc-daygrid-more-link:hover {
  color: var(--antd-cal-primary-hover) !important;
  background: var(--antd-cal-primary-bg) !important;
  border-radius: 4px !important;
}

/* ── More popover ── */
.fc .fc-popover {
  border-radius: var(--antd-cal-radius) !important;
  border: none !important;
  box-shadow: var(--antd-cal-shadow) !important;
  overflow: hidden !important;
}

.fc .fc-popover-header {
  background: #fafafa !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--antd-cal-text) !important;
  border-bottom: 1px solid var(--antd-cal-border) !important;
}

.fc .fc-popover-body {
  padding: 8px 12px !important;
}

/* ── Week view / Day view ── */
.fc .fc-timegrid-slot {
  height: 48px !important;
  border-bottom: 1px solid var(--antd-cal-border) !important;
}

.fc .fc-timegrid-slot-label-cushion {
  font-size: 12px !important;
  color: var(--antd-cal-text-secondary) !important;
}

.fc .fc-timegrid-event {
  border-radius: 4px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  font-size: 12px !important;
}

/* ── List view ── */
.fc .fc-list {
  border: none !important;
  border-radius: 0 0 var(--antd-cal-radius) var(--antd-cal-radius);
}

.fc .fc-list-day-cushion {
  background: #fafafa !important;
  padding: 8px 16px !important;
}

.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  color: var(--antd-cal-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.fc .fc-list-event td {
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--antd-cal-border) !important;
}

.fc .fc-list-event:hover td {
  background: var(--antd-cal-bg-hover) !important;
}

.fc .fc-list-event-dot {
  border: none !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

.fc .fc-list-event-title a {
  color: var(--antd-cal-text) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.fc .fc-list-event-time {
  color: var(--antd-cal-text-secondary) !important;
  font-size: 14px !important;
}

/* ── Selection highlight ── */
.fc .fc-highlight {
  background: var(--antd-cal-primary-bg) !important;
  opacity: 1 !important;
}

/* ── Now indicator (current time line) ── */
.fc .fc-timegrid-now-indicator-line {
  border-color: var(--antd-cal-error) !important;
}

.fc .fc-timegrid-now-indicator-arrow {
  border-color: var(--antd-cal-error) !important;
}

/* ── Scrollbar styling ── */
.fc .fc-scroller::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.fc .fc-scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.fc .fc-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.fc .fc-scroller::-webkit-scrollbar-track {
  background: transparent;
}