/*
  telerik-calendar.css — habillage KostKat du calendrier Telerik (TelerikDatePicker / TelerikCalendar),
  partagé par KostKat.WebApp et KostKat.Mobile.

  Pourquoi une feuille globale et non un CSS scoped d'AppDatePicker : le calendrier s'ouvre dans un
  popup rendu à la racine du document, hors de l'arbre du composant — un `::deep` ne l'atteint pas.

  Déplacé ici depuis KostKat.WebApp/wwwroot/css/components.css le 2026-08-27 : ces règles n'étaient
  chargées que par le Web, si bien que le même composant n'avait pas le même calendrier d'un client
  à l'autre (jours des mois voisins visibles sur Mobile, masqués sur Web, entre autres).
*/

.k-calendar {
  border: 1px solid var(--kk-color-border);
  border-radius: var(--kk-radius-lg);
  box-shadow: var(--kk-shadow-md);
  background: var(--kk-color-surface);
  overflow: hidden;
}

.k-calendar-view {
  min-height: 0;
}

.k-calendar-header {
  background: var(--kk-color-row-alt);
  border-bottom: 1px solid var(--kk-color-border-strong);
  padding: 0.75rem 1rem;
}

/* Titre "Août 2026" centré et net — le point de repère principal du calendrier. */
.k-calendar-navigation {
  font-weight: 700;
  font-size: var(--kk-font-size-md);
  color: var(--kk-color-text);
  text-align: center;
}

.k-calendar-nav .k-button {
  color: var(--kk-color-text-muted);
  border-radius: var(--kk-radius-pill);
}

.k-calendar-nav .k-button:hover {
  color: var(--kk-color-brand);
  background: var(--kk-color-brand-subtle, var(--kk-color-canvas));
}

/* En-têtes de jours (Lu, Ma, Me…) : discrets, jamais la couleur qui porte l'information. */
.k-calendar-th {
  color: var(--kk-color-text-subtle);
  font-weight: 600;
  font-size: var(--kk-font-size-xs, 0.75rem);
  letter-spacing: 0.02em;
}

.k-calendar-td.k-other-month .k-link,
.k-calendar-td.k-other-month .k-calendar-cell-inner {
  visibility: hidden;
  pointer-events: none;
}

.k-calendar-td.k-today .k-link,
.k-calendar-td.k-today .k-calendar-cell-inner {
  font-weight: 700;
  color: var(--kk-color-brand);
}

.k-calendar-td.k-selected {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--kk-color-brand);
}

.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner {
  background: transparent;
  color: var(--kk-color-text);
  font-weight: 700;
}

.k-calendar-tr:hover .k-calendar-td,
.k-calendar-td:hover {
  background: var(--kk-color-surface);
}

.k-calendar-td:hover .k-link,
.k-calendar-td:hover .k-calendar-cell-inner {
  border-color: transparent;
}