/* ===================================================================
   CALENDRIER IAMSHIBA – Apple-like, aligné sur le KPI
   - Page entité : .calendar-container
   - Dashlet : .dashboard-panel (qui contient .fc)
   =================================================================== */

/* --- Tokens visuels ----------------------------------------------- */

:root{
  --gc-bg: var(--bg, #f5f5f7);
  --gc-panel: var(--panel, #ffffff);
  --gc-grid: rgba(15,23,42,.06);
  --gc-muted:#9ca3af;
  --gc-text:#111827;
  --gc-blue:#2563eb;
  --gc-orange:#f97316;
  --gc-now:#ef4444;
}

/* Densité par contexte */
.calendar-container{ --gc-slot-h:14px; }   /* page */
.dashboard-panel   { --gc-slot-h:12px; }   /* dashlet */

/* ===================================================================
   1. Panel / carte
   =================================================================== */

/* Entité calendrier : grande carte */
.calendar-container .panel{
  background:var(--gc-panel);
  border-radius:24px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}

/* Dashlet calendrier : même carte */
.dashboard-panel .panel{
  background:var(--gc-panel);
  border-radius:24px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}

.calendar-container .panel-heading,
.dashboard-panel .panel-heading{
  background:transparent;
  border-bottom:0;
  padding:16px 20px 8px;
}

.calendar-container .panel-body,
.dashboard-panel .panel-body{
  background:var(--gc-panel);
  border-radius:0 0 24px 24px;
  padding:8px 16px 16px;
}

/* ENTITÉ (page) : occuper la hauteur de viewport dispo */
:root{ --cal-header-h:170px; }
.calendar-container .panel > .panel-body{
  min-height:calc(100vh - var(--cal-header-h)) !important;
}

/* ===================================================================
   2. FullCalendar : typo, toolbar, grille
   =================================================================== */

.calendar-container .fc,
.dashboard-panel .fc{
  direction:ltr !important;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  margin-bottom:0 !important;
  background:var(--gc-panel);
}

/* Toolbar : mois + boutons */
.calendar-container .fc-toolbar,
.dashboard-panel .fc-toolbar{
  align-items:center;
  gap:12px;
}

.calendar-container .fc-toolbar-title,
.dashboard-panel .fc-toolbar-title{
  font-size:16px;
  font-weight:600;
  color:var(--gc-text);
}

/* Boutons (Aujourd’hui, flèches, vues…) */
.calendar-container .fc .fc-button,
.dashboard-panel .fc .fc-button{
  border-radius:999px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:#f5f5f7 !important;
  color:var(--gc-text) !important;
  font-size:11px !important;
  font-weight:500 !important;
  padding:4px 10px !important;
  box-shadow:none !important;
}

.calendar-container .fc .fc-button:hover,
.dashboard-panel .fc .fc-button:hover{
  background:#e5e7eb !important;
}

.calendar-container .fc .fc-button.fc-button-active,
.dashboard-panel .fc .fc-button.fc-button-active{
  background:#111827 !important;
  color:#fff !important;
}

/* Grille allégée */
.calendar-container .fc .fc-scrollgrid,
.dashboard-panel .fc .fc-scrollgrid{
  border-color:transparent !important;
}

.calendar-container .fc-theme-standard td,
.calendar-container .fc-theme-standard th,
.dashboard-panel .fc-theme-standard td,
.dashboard-panel .fc-theme-standard th{
  border-color:var(--gc-grid) !important;
}

/* En-tête des jours (LUN, MAR…) */
.calendar-container .fc-col-header-cell-cushion,
.dashboard-panel .fc-col-header-cell-cushion{
  padding:6px 0 !important;
  font-weight:600 !important;
  color:var(--gc-muted) !important;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ===================================================================
   3. Vues mois / semaine / jour
   =================================================================== */

/* MOIS (page) : pas de scrollbar interne + remplissage */
.calendar-container .fc-dayGridMonth-view .fc-scroller{ overflow:visible !important; }
.calendar-container .fc-dayGridMonth-view .fc-daygrid-body{
  overflow:visible !important;
  min-height:calc(100vh - var(--cal-header-h) - 140px) !important;
}

/* SEMAINE / JOUR (page) : pas de scrollbar interne */
.calendar-container .fc-timeGridWeek-view .fc-scroller,
.calendar-container .fc-timeGridDay-view  .fc-scroller{
  overflow:visible !important;
}

/* Densité & labels (commun) */
.calendar-container .fc-timegrid-slot,
.dashboard-panel .fc-timegrid-slot,
.calendar-container .fc-timegrid-slot-label,
.dashboard-panel .fc-timegrid-slot-label,
.calendar-container .fc-timegrid-slot-minor,
.dashboard-panel .fc-timegrid-slot-minor{
  min-height:var(--gc-slot-h) !important;
  line-height:var(--gc-slot-h) !important;
}

.calendar-container .fc-timegrid-axis-cushion,
.dashboard-panel .fc-timegrid-axis-cushion,
.calendar-container .fc-timegrid-slot-label-cushion,
.dashboard-panel .fc-timegrid-slot-label-cushion{
  font-size:11px !important;
  color:var(--gc-muted) !important;
}

/* Compression auto (page uniquement) */
@media (max-height:900px){ .calendar-container{ --gc-slot-h:12px; } }
@media (max-height:760px){ .calendar-container{ --gc-slot-h:10px; } }

/* ===================================================================
   4. Événements
   =================================================================== */

/* Vue semaine/jour : pilules bleues */
.calendar-container .fc-timegrid-event,
.dashboard-panel .fc-timegrid-event{
  background:var(--gc-blue) !important;
  border:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.08);
}

.calendar-container .fc-v-event .fc-event-main,
.dashboard-panel .fc-v-event .fc-event-main{
  color:#fff !important;
  font-weight:600 !important;
  padding:3px 6px 3px 0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Vue mois : puce + libellé */
.calendar-container .fc-daygrid-event,
.dashboard-panel .fc-daygrid-event{
  background:transparent !important;
  border:0 !important;
  padding:0 6px !important;
  margin:2px 4px !important;
  border-radius:6px !important;
  color:var(--gc-text) !important;
  font-size:11px !important;
  line-height:1.15 !important;
}

.calendar-container .fc-daygrid-event .fc-event-main,
.dashboard-panel .fc-daygrid-event .fc-event-main{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.calendar-container .fc-daygrid-event .fc-event-main::before,
.dashboard-panel .fc-daygrid-event .fc-event-main::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gc-orange);
}

/* Événements multi-jours / all-day */
.calendar-container .fc-daygrid-block-event .fc-event-main,
.dashboard-panel .fc-daygrid-block-event .fc-event-main{
  background:rgba(249,115,22,.08) !important;
  color:var(--gc-text) !important;
  border-radius:10px !important;
  padding:4px 8px 4px 0 !important;
  font-weight:600 !important;
}

/* Ligne "maintenant" */
.calendar-container .fc .fc-timegrid-now-indicator,
.dashboard-panel .fc .fc-timegrid-now-indicator{
  border-top:2px solid var(--gc-now) !important;
}

/* ===================================================================
   5. Jours (vue mois) : numéros & survol
   =================================================================== */

.calendar-container .fc-daygrid-day-number,
.dashboard-panel .fc-daygrid-day-number{
  padding:6px 10px 4px !important;
  font-weight:600 !important;
  color:var(--gc-muted) !important;
  border-radius:999px;
  line-height:1;
}

.calendar-container .fc-daygrid-day:hover .fc-daygrid-day-number,
.dashboard-panel .fc-daygrid-day:hover .fc-daygrid-day-number{
  background:rgba(15,23,42,.06);
}

/* Aujourd’hui : pastille bleue */
.calendar-container .fc-day-today .fc-daygrid-day-number,
.dashboard-panel .fc-day-today .fc-daygrid-day-number{
  background:var(--gc-blue) !important;
  color:#fff !important;
}