/* =============================================================
   Merely – Chainlit Login Page
   ============================================================= */

/* ── Background page ────────────────────────────────────────── */
body, html, #root {
  background-color: #EDF0F7 !important;
  min-height: 100vh;
}

/* ── Card / formulaire ──────────────────────────────────────── */
.MuiPaper-root,
[class*="MuiPaper-elevation"] {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
}

/* ── Titre ──────────────────────────────────────────────────── */
h1, h2 {
  color: #0D1B2A !important;
  font-weight: 700 !important;
}

/* Sous-titre */
h1 + p, h2 + p {
  color: #6B7280 !important;
}

/* ── Labels ─────────────────────────────────────────────────── */
label,
[class*="MuiFormLabel"],
[class*="MuiInputLabel"] {
  color: #374151 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* ── Inputs ─────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
[class*="MuiInputBase-input"],
[class*="MuiOutlinedInput"] input,
[class*="MuiInputBase-root"],
[class*="MuiOutlinedInput-root"] {
  background-color: #EEF2FF !important;
  border-radius: 8px !important;
  color: #0D1B2A !important;
}

[class*="MuiOutlinedInput-notchedOutline"],
[class*="MuiOutlinedInput-root"] fieldset {
  border-color: #D1D9E6 !important;
  border-radius: 8px !important;
}

input:focus,
[class*="Mui-focused"] fieldset {
  border-color: #2D5F9E !important;
  box-shadow: 0 0 0 3px rgba(45, 95, 158, 0.12) !important;
  outline: none !important;
}

/* ── Bouton "Se connecter" ──────────────────────────────────── */
button[type="submit"],
[class*="MuiButton-contained"] {
  background: #0D1B2A !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
  border: none !important;
  transition: background 0.2s, transform 0.15s !important;
}

button[type="submit"]:hover {
  background: #1a2f47 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.2) !important;
}

/* ── Lien mot de passe oublié ───────────────────────────────── */
form a {
  color: #2D5F9E !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
}

form a:hover {
  text-decoration: underline !important;
}

/* ── Largeur de la colonne de conversation ──────────────────────
   Même en layout = "wide", Chainlit plafonne le fil et le composer à
   min(60rem, 100vw), posé en style inline — d'où le !important.
   On cible cette déclaration précise plutôt qu'un jeu de classes Tailwind :
   seuls les conteneurs réellement plafonnés sont touchés, donc le fil et le
   composer gardent le même axe. Si le sélecteur ne matche plus (montée de
   version de Chainlit), la mise en page revient au 60rem d'origine au lieu
   de casser. Ajuster la valeur ci-dessous pour élargir ou resserrer. */
[style*="min(60rem"] {
  max-width: min(100rem, 100vw) !important;
}

/* ── Calendrier : barres de défilement permanentes ───────────────
   Par défaut le navigateur peut n'afficher les barres qu'au survol
   (scrollbars en superposition), ce qui masque le fait que le Gantt continue
   au-delà du bord. Styler ::-webkit-scrollbar force des barres classiques,
   toujours visibles, dans le conteneur du calendrier uniquement. */
.cal-scroll {
  scrollbar-width: thin;
  scrollbar-color: #C9CFDD #F7F9FC;
}
.cal-scroll::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
.cal-scroll::-webkit-scrollbar-track {
  background: #F7F9FC;
}
.cal-scroll::-webkit-scrollbar-thumb {
  background: #C9CFDD;
  border: 2px solid #F7F9FC;
  border-radius: 6px;
}
.cal-scroll::-webkit-scrollbar-thumb:hover {
  background: #9AA7C7;
}
.cal-scroll::-webkit-scrollbar-corner {
  background: #F7F9FC;
}

/* ── Tables Markdown (chat) ──────────────────────────────────── */
table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: max-content !important;
  max-width: 100% !important;
}

table th,
table td {
  white-space: nowrap !important;
  padding: 6px 20px !important;
  min-width: 140px !important;
  border: 1px solid #D1D9E6 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

table th {
  background-color: #EDF0F7 !important;
  font-weight: 600 !important;
  color: #0D1B2A !important;
}

table tr:nth-child(even) td {
  background-color: #F8F9FC !important;
}


.cev-container { margin: 8px 0; }

/* Controls bar */
.cev-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* View toggle */
.cev-toggle {
  display: flex;
  border: 1px solid #D1D9E6;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.cev-tbtn {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  background: #fff;
  border: none;
  cursor: pointer;
  color: #374151;
  transition: background .15s, color .15s;
  line-height: 1.5;
}
.cev-tbtn + .cev-tbtn { border-left: 1px solid #D1D9E6; }
.cev-tbtn.cev-on      { background: #0D1B2A; color: #fff; }
.cev-tbtn:hover:not(.cev-on) { background: #EDF0F7; }

/* Export bar */
.cev-export-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.cev-exp-lbl {
  font-size: 0.80rem;
  color: #6B7280;
}
.cev-ebtn {
  padding: 5px 11px;
  font-size: 0.80rem;
  font-weight: 500;
  background: #F3F4F6;
  border: 1px solid #D1D9E6;
  border-radius: 6px;
  cursor: pointer;
  color: #374151;
  transition: background .15s, border-color .15s;
}
.cev-ebtn:hover  { background: #E5E7EB; border-color: #9CA3AF; }
.cev-ebtn:active { background: #D1D5DB; }

/* Hide utility */
.cev-hide { display: none !important; }
/* Overrides table { display: block !important } via higher specificity (element.class) */
table.cev-table-hidden { display: none !important; }

/* Calendar wrapper */
.cev-cal-wrap {
  border: 1px solid #D1D9E6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-width: 380px;
  max-width: 820px;
}

/* Widget root */
.cev-widget {
  font-family: inherit;
  font-size: 0.84rem;
  color: #0D1B2A;
  user-select: none;
}

/* Navigation */
.cev-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #0D1B2A;
  color: #fff;
}
.cev-month-label {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: .02em;
}
.cev-nav-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background .15s;
}
.cev-nav-btn:hover { background: rgba(255,255,255,.15); }

/* Body */
.cev-body {
  padding: 4px 8px 8px;
  overflow-x: auto;
}

/* Day-of-week header */
.cev-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-top: 6px;
  margin-bottom: 2px;
}
.cev-dow {
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: #6B7280;
  padding: 4px 0;
}

/* Week */
.cev-week { margin-bottom: 1px; }

/* Day-number row */
.cev-num-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cev-dn {
  text-align: right;
  padding: 1px 4px;
}
.cev-dn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.74rem;
  border-radius: 50%;
  color: #374151;
}
.cev-dn.cev-other span { color: #CBD5E1; }
.cev-dn.cev-today span {
  background: #2D5F9E;
  color: #fff;
  font-weight: 700;
}

/* Event stacking slots */
.cev-slot {
  position: relative;
  height: 22px;
  margin-bottom: 1px;
}
.cev-slot-empty { height: 6px !important; }

/* Event bar */
.cev-bar {
  position: absolute;
  top: 2px;
  height: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 5px;
  opacity: .88;
  transition: opacity .15s;
  cursor: default;
  min-width: 4px;
  box-sizing: border-box;
}
.cev-bar:hover { opacity: 1; z-index: 10; }
.cev-bar-label {
  font-size: 0.70rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}

/* Legend */
.cev-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 14px;
  border-top: 1px solid #EDF0F7;
  background: #F8F9FC;
}
.cev-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #374151;
}
.cev-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}