/* =====================================================
   CRM EVENTS – BASE CSS
   Utilisé avec TailwindCSS + Font Awesome UNIQUEMENT
   ===================================================== */

/* =====================
   Fonts – Everett
   ===================== */
@font-face {
  font-family: 'Everett';
  src: url('../fonts/Everett-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Everett';
  src: url('../fonts/Everett-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Everett';
  src: url('../fonts/Everett-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =====================
   Global reset minimal
   ===================== */
html,
body {
  height: 100%;
  touch-action: manipulation;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Everett', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f3f4f6; /* équivalent Tailwind bg-gray-100 */
}

/* =====================
   iOS / Safari fixes
   ===================== */

/* Empêche le zoom iOS sur focus input */
input,
select,
textarea,
button {
  font-size: 16px;
}

/* Safe areas (iPhone notch / home indicator) */
.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Désactive styles natifs Safari - SAUF radio, checkbox ET boutons */
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* =====================
   Labels – alignement + weight
   ===================== */
label {
  text-align: left !important;
  font-weight: 400 !important; /* Regular au lieu de medium */
}

/* =====================
   Inputs – styles custom
   ===================== */
input,
select,
textarea {
  border-radius: 8px !important; /* Moins arrondi que rounded-xl (12px) */
  background-color: #f9fafb !important; /* Tailwind gray-50 - gris très clair */
}

/* =====================
   Password visibility
   (structure Tailwind)
   ===================== */
/*
  Utilisation prévue :
  <div class="relative">
    <input type="password" class="pr-12">
    <button class="absolute right-3 top-1/2 -translate-y-1/2">
*/
.password-toggle {
  cursor: pointer;
  color: #6b7280; /* Tailwind gray-500 */
}

.password-toggle:hover {
  color: #111827; /* Tailwind gray-900 */
}

/* ===============================
   HEADER – Logo société
   =============================== */
.header-logo {
  max-width: 140px;   /* largeur max du logo */
  height: 40px;       /* hauteur du header logo */
  display: flex;
  align-items: center;
}

.header-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* ✅ Chrome / Edge : cache l'icône native du input time */
.time-input::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  display: none !important;
  -webkit-appearance: none !important;
}

/* (optionnel) autres trucs internes */
.time-input::-webkit-clear-button{
  display: none !important;
}
.time-input::-webkit-inner-spin-button{
  display: none !important;
}

/* ===========================
   iOS Action Sheet (light)
   =========================== */

/* overlay visible + animations */
#eventMenuOverlay { pointer-events: none; }
#eventMenuOverlay.show { pointer-events: auto; }

/* sheet enters from bottom */
#eventMenuSheet {
  transform: translateY(24px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
#eventMenuOverlay.show #eventMenuSheet {
  transform: translateY(0);
  opacity: 1;
}

/* backdrop fade */
#eventMenuBackdrop {
  opacity: 0;
  transition: opacity .18s ease;
}
#eventMenuOverlay.show #eventMenuBackdrop { opacity: 1; }

/* card */
.ios-sheet-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

/* handle */
.ios-sheet-handle {
  width: 38px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  margin: 10px auto 6px;
}

/* item */
.ios-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  font-size: 16px;
  color: #111827;
  text-decoration: none;
  background: transparent;
}
.ios-sheet-item + .ios-sheet-item { border-top: 1px solid rgba(0,0,0,.08); }
.ios-sheet-item:active { background: rgba(0,0,0,.06); }

.ios-sheet-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.06);
  color: #111827;
  flex: 0 0 auto;
}
.ios-sheet-label { flex: 1; }

/* cancel button */
.ios-sheet-cancel {
  width: 100%;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}
.ios-sheet-cancel:active { background: rgba(0,0,0,.06); }
/* =====================
   TinyMCE – suppression bordure extérieure uniquement
   ===================== */
.tox-tinymce {
  border: none !important;
  box-shadow: none !important;
}
@media screen and (max-width: 768px) {
  input, select, textarea, .select2-selection {
    font-size: 16px !important;
  }
}