/* =========================================================================
   PlanNow — Styles personnalisés
   Tailwind gère l'essentiel ; ce fichier ajoute les micro-interactions,
   les animations d'overlay et quelques finitions premium.
   ========================================================================= */

:root {
  --kro-indigo: #0F172A; /* obsidian — couleur maîtresse */
  --kro-ring: 0 0 0 4px rgb(15 23 42 / 0.10);
}

* { -webkit-tap-highlight-color: transparent; }

/* Scrollbars discrètes ------------------------------------------------------ */
.kro-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.kro-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.kro-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.kro-scroll::-webkit-scrollbar-track { background: transparent; }
.kro-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* Scrollbar totalement masquée (ex. bandeau de dates mobile) ---------------- */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Dégradé de marque réutilisable -------------------------------------------- */
/* Aplat obsidian de marque (remplace l'ancien dégradé). */
.kro-gradient { background-color: #0F172A; }
.kro-text-gradient { color: #0F172A; }

/* Apparition des vues ------------------------------------------------------- */
.kro-view { animation: kro-fade-up .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes kro-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Modale -------------------------------------------------------------------- */
.kro-modal-backdrop { animation: kro-fade .2s ease both; backdrop-filter: blur(4px); }
.kro-modal-panel { animation: kro-pop .28s cubic-bezier(.16, 1, .3, 1) both; }
.kro-modal-closing .kro-modal-backdrop { animation: kro-fade .18s ease both reverse; }
.kro-modal-closing .kro-modal-panel { animation: kro-pop .18s ease both reverse; }
@keyframes kro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kro-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Toasts -------------------------------------------------------------------- */
.kro-toast { animation: kro-toast-in .35s cubic-bezier(.16, 1, .3, 1) both; }
.kro-toast.kro-toast-out { animation: kro-toast-out .3s ease forwards; }
@keyframes kro-toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kro-toast-out { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* Squelette de chargement (shimmer) ------------------------------------------ */
@keyframes kro-shimmer { 0% { background-position: -160px 0; } 100% { background-position: 160px 0; } }
.kro-skeleton { background: linear-gradient(90deg, #EAEEF3 0%, #F6F8FA 50%, #EAEEF3 100%); background-size: 320px 100%; animation: kro-shimmer 1.1s ease-in-out infinite; }

/* Créneaux : micro-élévation au survol -------------------------------------- */
.kro-slot { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
/* Retour visuel discret au survol d'un créneau libre : élévation légère + ombre ardoise. */
.kro-slot-free:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgb(15 23 42 / .35); }
.kro-slot-free:active { transform: translateY(0) scale(.99); }

/* Barre de navigation latérale : lien actif --------------------------------- */
.kro-nav-link { transition: background-color .2s ease, color .2s ease; }

/* Champ focus accent -------------------------------------------------------- */
.kro-field:focus { outline: none; box-shadow: var(--kro-ring); border-color: var(--kro-indigo); }

/* Empêche le zoom automatique de Safari/Chrome iOS à la prise de RDV ---------
   iOS zoome la page dès qu'un champ a un font-size < 16px au focus, puis ne
   dézoome pas tout seul après fermeture de la modale. On force 16px sur tous
   les champs sous 640px (le texte reste lisible, l'écart visuel est minime). */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Switch (toggle) personnalisé ---------------------------------------------- */
.kro-switch { transition: background-color .25s ease; }
.kro-switch-dot { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }

/* Barre de progression d'import --------------------------------------------- */
.kro-progress-bar { transition: width .25s ease; }

/* Empêche le défilement du body quand une modale est ouverte ---------------- */
body.kro-modal-open { overflow: hidden; }

/* Pulsation douce (indicateur "en direct") ---------------------------------- */
.kro-pulse { animation: kro-pulse 2s ease-in-out infinite; }
@keyframes kro-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Ligne d'agenda : effet de fond strié léger -------------------------------- */
.kro-daycol:nth-child(even) { background-image: linear-gradient(180deg, rgba(241,245,249,.5), rgba(241,245,249,.5)); }

/* Accessibilité : focus visible cohérent ------------------------------------ */
:focus-visible { outline: 2px solid var(--kro-indigo); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible) { outline: none; }

/* --- Logo PlanNow --- */
.pn-logo {
  font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  cursor: pointer;
  transition: letter-spacing 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.pn-logo:hover { letter-spacing: 0.14em; }
.pn-pla { color: #111827; }
.pn-n {
  background: linear-gradient(to right, #111827 50%, #9ca3af 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pn-ow {
  color: #9ca3af;
  transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pn-logo:hover .pn-ow { color: #6b7280; }

@media (prefers-reduced-motion: reduce) {
  .pn-logo { transition: none !important; }
  .pn-logo:hover { letter-spacing: 0.06em !important; }
  .pn-ow { transition: none !important; }
}

/* Barres d'analyse : animation de croissance -------------------------------- */
.kro-bar { transition: width .6s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .kro-bar { transition: none; } }

/* Masquer la scrollbar native (bandeau de dates mobile) -------------------- */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }