/* /public_html/assets/css/dashboard-planning.css */

/* =========================================
   PLANNING PUBLIC (hebdo) — CLEAN + STICKY OK
   ========================================= */

/* Wrapper full width (si tu l’utilises déjà, garde-le ici) */
.planning-public-wrapper{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0px clamp(12px, 2vw, 22px) 22px;
}

/*
  Le "panel shell" ajoute un petit espace sous le header commun (padding-top de .panel-body).
  Pour le planning hebdo, on veut les headers jours collés au header => on annule cet espace.
*/
.panel-header-common + .panel-body .planning-public-wrapper{
  margin-top: calc(-1 * var(--space-4, 16px));
}

.planning-public-content{ width: 100%; }

/* Grid jours */
.planning-public-grid{
  display: grid;
  gap: 10px; /* espace entre jours (réduit) */
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 860px){
  .planning-public-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   CONTENEUR JOUR
   ⚠️ IMPORTANT : PAS de overflow:hidden sinon sticky KO
   ========================================= */
.planning-public-day{
  border-radius: 18px;
  padding: 0px; /*12px 12px 14px;*/

  overflow: visible; /* <-- clé du sticky */

  /* Light: un poil plus sombre */
  background: rgba(0,0,0,0.0);
  box-shadow: 0 10px 28px rgba(15,23,42,0.0); /*rgba(15,23,42,0.08);*/
  border: 0px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

html[data-theme="dark"] .planning-public-day{
  /* Dark: un poil plus clair */
  background: rgba(255,255,255,0.0);
  box-shadow: 0 18px 50px rgba(0,0,0,0.0);
  border-color: rgba(148,163,184,0.0);
}

/* =========================================
   HEADER JOUR (centré + compteur dessous + sticky)
   En mobile (1 colonne), le sticky se “remplace” naturellement
   quand le jour suivant arrive (c’est exactement le comportement voulu).
   ========================================= */
.planning-public-day-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;

  position: sticky;
  top: var(--planning-public-sticky-top, calc(var(--app-header-height) + 16px));
  z-index: 6;

  padding: 10px 10px 12px;
  border-radius: 0px 0px 14px 14px;
  
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Header jour : gradient + fine bordure (conteneur jour reste transparent) */
html:not([data-theme="dark"]) .planning-public-day-header{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.78) 55%,
    rgba(255,255,255,0.68) 100%
  );

  border: 1px solid rgba(15,23,42,0.12);
  border-top: 0; /* pour l’effet “étiquette collée” */
  box-shadow: 0 10px 26px rgba(15,23,42,0.12);
}

html[data-theme="dark"] .planning-public-day-header{
  background: linear-gradient(
    180deg,
    rgba(2,6,23,0.72) 0%,
    rgba(2,6,23,0.58) 55%,
    rgba(2,6,23,0.50) 100%
  );

  border: 1px solid rgba(148,163,184,0.22);
  border-top: 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.planning-public-day-header h3{
  margin: 0;
  width: 100%;
  font-size: 1.05rem;
}

.planning-public-day-count{
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.72;
}

.planning-public-day-list{
  padding-top: 16px;
}

/* =========================================
   ROWS (tranches horaires)
   ========================================= */
.planning-public-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;          /* espace entre cours (réduit) */
  margin-bottom: 6px;
}
.planning-public-row:last-child{ margin-bottom: 0; }

.planning-public-row.is-two{
  grid-template-columns: 1fr 1fr;
}

/* Mobile : on stack les deux cours */
@media (max-width: 720px){
  .planning-public-row.is-two{ grid-template-columns: 1fr; }
}

/* =========================================
   CARTE COURS (teintée)
   ========================================= */
.planning-public-course{
  background: color-mix(in srgb, var(--course-color) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--course-color) 35%, rgba(148,163,184,0.35));
  border-radius: 18px;

  padding: 14px 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  text-align: center;

  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

html[data-theme="dark"] .planning-public-course{
  background: color-mix(in srgb, var(--course-color) 16%, rgba(2,6,23,0.20));
  border-color: color-mix(in srgb, var(--course-color) 28%, rgba(148,163,184,0.25));
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

.planning-public-course-time{
  font-weight: 800;
  letter-spacing: 0.01em;
}

.planning-public-course-style{
  display: flex;
  justify-content: center;
}

.planning-public-course-level{
  font-weight: 800;
  font-style: italic;
  opacity: 0.95;
}

.planning-public-course-teacher{
  opacity: 0.85;
  font-weight: 650;
}