/* ======================== 
   Variables globales
======================== */
:root{
  --od-orange:#f38a1e;
  --od-bg:#f6f7fb;
  --od-card:#ffffff;
  --od-text:#121826;
  --od-muted:#5b6475;
  --od-border:#e6e8ee;
  --od-shadow:0 6px 20px rgba(18,24,38,.06);
  --od-radius:16px;

  /* Alignement liste (icône 1ʳᵉ colonne) */
  --od-icon-w:22px;
  --od-icon-gap:8px;
}

/* ========================
   Base & Layout
======================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:#f7f8fa;
  color:#1f2937;
}
.container { max-width:1100px; margin:0 auto; padding:20px; }
.od-container{ max-width:1100px; margin:0 auto; padding:0 16px; }

/* ========================
   Header (sombre)
======================== */
.od-header{ height:64px; display:flex; align-items:center; }
.od-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:6px; }
.od-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:20px; }
.od-header .od-logo img{ height:52px; width:auto; display:block; transition: transform .15s ease; }
.od-header .od-logo img:hover{ transform: scale(1.05); }

.od-header__right{ display:flex; align-items:center; gap:18px; }
.od-user{ opacity:.95; color:#fff; }
.od-link{ color:#fff; text-decoration:none; font-weight:600; border:1px solid #fff4; padding:8px 12px; border-radius:10px; }
.od-link:hover{ background:#fff1; }

.od-brand-name{
  font-weight:700;
  font-size:1.25rem; /* équivalent fs-5 Bootstrap */
  line-height:1;
  white-space:nowrap;
}
.brand-accent{
  color:#f38a1e;
}

/* Navigation (scopée header) */
.od-header .nav{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0; padding:0; }
.od-header .nav .nav-item{ list-style:none; }
.od-header .nav .nav-link{
  text-decoration:none; color:#fff !important; font-weight:500;
  padding:6px 8px; border-radius:8px; transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.od-header .nav .nav-link:hover{ color:var(--od-orange) !important; }
.od-header .nav .nav-link.active{ color:var(--od-orange) !important; font-weight:600; }
.border-light { border-color: rgba(255,255,255,.25) !important; }

/* Icônes user / logout */
.od-header .od-user svg { color: var(--od-orange); }
.dropdown-menu .dropdown-item svg { color:#952323; }

/* ========================
   Buttons
======================== */
.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  transition: background .15s ease, box-shadow .15s ease;
}

/* Style neutre uniquement pour les boutons "génériques",
   pas pour les variantes Bootstrap */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success)
    :not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark)
    :not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success)
    :not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark){
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success)
    :not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark)
    :not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success)
    :not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):hover{
  background:#f3f4f6;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}

/* Réassurance pour .btn-primary (modal, etc.) */
.btn-primary{ color:#fff; background-color:#0d6efd; border-color:#0d6efd; }
.btn-primary:hover{ background-color:#0b5ed7; border-color:#0a58ca; }

.btn-link{ background:none; border:none; padding:6px 8px; margin-left:6px; cursor:pointer; color:#374151; font-weight:500; border-radius:8px; transition: color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.btn-link:hover{ color:#b91c1c; background:#fee2e2; }

.btn-green{
  background-color:#86b095; color:#fff; font-weight:bold; padding:8px 14px; border-radius:8px; text-decoration:none; border:1px solid transparent; transition: background-color .15s ease, transform .15s ease;
}
.btn-green:hover{ background-color:#22c55e; transform: translateY(-1px); }

/* ========================
   Main & Home grid/cards
======================== */
.od-main{ padding:28px 0 40px; }
.od-title{ text-align:center; width:100%; margin-bottom:32px; }

.od-grid{
  display: grid;
  gap: 18px;
  justify-content: center; /* centre le bloc de cartes dans la .od-container */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* On garde juste l'ajustement du titre sur mobile */
@media (max-width:560px){
  .od-title{ font-size:28px; }
}

.od-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:180px;
  background:var(--od-card); border:1px solid var(--od-border);
  border-radius:var(--od-radius); box-shadow:var(--od-shadow);
  padding:22px; transition:transform .18s ease, box-shadow .18s ease; text-decoration:none; color:inherit;
}
.od-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(18,24,38,.10); }
.od-card__head{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:10px; }
.od-ico{ margin-bottom:6px; width:52px; height:52px; display:inline-grid; place-items:center; border-radius:14px; background:#fff3e7; }
.od-ico--clients, .od-ico--rdv, .od-ico--prest, .od-ico--camp{ background:#fff3e7; }
.od-card__title{ font-size:22px; font-weight:800; }
.od-kpis{ margin-top:6px; color:var(--od-muted); font-size:15px; line-height:1.45; }
.od-sep{ height:1px; background:var(--od-border); margin:10px 0; }

/* ========================
   Tables OneDesk
======================== */
.od-table-wrap{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.04); overflow:hidden; }
.table.od-table{ margin:0; border-collapse:separate; border-spacing:0; }
.table.od-table thead th{ background:#fafafa; color:#111827; font-weight:600; border-bottom:1px solid #e5e7eb !important; vertical-align:middle; }
.table.od-table tbody tr{ transition: background-color .15s ease; }
.table.od-table tbody tr:hover{ background:#fbfbfd; }
.table.od-table td, .table.od-table th{ padding:12px 14px !important; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.col-narrow{ width:1%; white-space:nowrap; }
.col-actions{ width:1%; white-space:nowrap; text-align:right; }
.od-actions .btn{ --bs-btn-padding-y:.25rem; --bs-btn-padding-x:.5rem; --bs-btn-font-size:.85rem; border-radius:8px; }
.od-actions .btn + .btn{ margin-left:.35rem; }
.badge-soft{ background:#f4f6f8; color:#374151; border:1px solid #e5e7eb; font-weight:600; border-radius:999px; }
.td-ellipsis{ max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ========================
   KPI, cards génériques
======================== */
.grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); transition: box-shadow .2s ease, transform .2s ease; }
.card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.kpi{ display:flex; flex-direction:column; align-items:flex-start; }
.kpi-title{ color:#6b7280; font-size:.9rem; }
.kpi-value{ font-size:2.2rem; font-weight:800; margin:6px 0; }
.kpi-sub{ color:#6b7280; font-size:.85rem; }
.mb{ margin-bottom:16px; }

/* ========================
   Table (fallback générique)
======================== */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid #eee; padding:10px; text-align:left; }
.table th{ font-weight:600; color:#374151; background:#fafafa; }

/* ========================
   Flash messages
======================== */
.flash{ list-style:none; padding:0; margin:10px 0; }
.flash li{ padding:10px; border-radius:10px; margin-bottom:8px; }
.flash-success{ background:#ecfdf5; }
.flash-info{ background:#eff6ff; }
.flash-error{ background:#fef2f2; }

/* ========================
   FullCalendar (RDV)
======================== */
.fc-timegrid-slot{
  height:1.5em !important;
}

/* On neutralise le style générique,
   tout est géré via eventContent dans rdv.html */
.fc-event{
  font-size:.75rem !important;   /* ou .8rem si tu préfères */
  padding:0 !important;          /* <=== plus de padding horizontal */
  border-radius:0 !important;    /* on laisse le JS gérer les arrondis */
}

/* ========================
   Auth pages
======================== */
.auth-page{ background: linear-gradient(180deg, #f7f8fa 0%, #eef2f7 100%); min-height:100dvh; display:grid; place-items:center; padding:24px; }
.auth-container{ width:100%; max-width:420px; }
.auth-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.auth-logo{ display:block; text-align:center; font-weight:800; font-size:1.25rem; color:#111827; text-decoration:none; margin-bottom:20px; }
.auth-title{ font-size:.8rem; text-align:center; font-weight:700; margin:6px 0 18px; color:#a7a9ab; }
.auth-error{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:.95rem; text-align:left; }
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; text-align:left; font-size:.9rem; color:#374151; margin-bottom:6px; }
.form-row input{ width:80%; max-width:320px; margin:0 auto; display:block; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; font-size:.95rem; background:#fff; }
.form-row input:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35); }
.auth-links{ display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.auth-links a{ color:#374151; font-size:.95rem; text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }
.auth-links.single{ text-align:left; margin:6px 0; display:block; }
.auth-links.single a{ font-size:.8rem; color:#6b7280; text-decoration:none; font-weight:500; }
.auth-links.single a:hover{ text-decoration:underline; color:#4b5563; }
.form-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.form-actions .btn{ width:auto; margin:0; padding:8px 16px; }

/* ========================
   Modale Bootstrap (inputs)
======================== */
.modal .form-control{ border-radius:8px; border:1px solid #e5e7eb; padding:10px 12px; }
.modal .form-control:focus{ outline:none; border-color:#86b095; box-shadow:0 0 0 .2rem rgba(134,176,149,.15); }

/* ========================
   Responsive
======================== */
@media (max-width:640px){
  .od-header .nav{ gap:10px; }
}

/* ========================
   Modale custom
======================== */
.custom-modal{ position:fixed; inset:0; z-index:1000; display:none; background:rgba(0,0,0,.45); }
.custom-modal.open{ display:block; }
.custom-modal-dialog{
  background:#fff; width:min(92vw, 640px); max-height:90vh; border-radius:14px;
  margin:5vh auto; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden;
}
.custom-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #e5e7eb; }
.custom-modal-close{ background:none; border:none; cursor:pointer; font-size:1.5rem; line-height:1; color:#6b7280; }
.custom-modal-close:hover{ color:#111827; }
.custom-modal-body{ padding:0; }
.custom-modal-body iframe{ width:100%; height:70vh; border:0; display:block; }

/* ========================
   Liste style “table” (sans <table>)
======================== */
.od-list{ width:100%; }

/* lignes */
.od-list-row{
  display:flex; flex-direction:row; align-items:center;
  background:#fff; border-radius:8px; padding:0 10px; min-height:56px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03); border:1px solid #e5e7eb;
  margin-top:10px; transition: background .15s ease;
}
.od-list-row:hover{ background:#f9fafb; }

/* header */
.od-list-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid var(--od-border); border-radius:8px;
  background:#f9fafb; font-weight:600; color:#374151; margin-top:10px;
}

/* mêmes règles d’alignement pour header + lignes */
.od-list-header > div,
.od-list-row   > div{
  display:flex; align-items:center; justify-content:center; padding:10px 12px;
}

/* 1ʳᵉ colonne: alignée à gauche partout */
.od-col-left{ justify-content:flex-start !important; text-align:left !important; }

/* réserve l’espace de l’icône dans l’entête */
.od-list-header .od-col-left{ padding-left: calc(var(--od-icon-w) + var(--od-icon-gap)); }

/* colonnes */
.od-col-35{ width:35%; }
.od-col-20{ width:20%; }
.od-col-15{ width:15%; }
.od-col-10{ width:10%; }

/* textes */
.od-list-header p{ margin:0; font-size:14px; font-weight:600; color:#828588; text-transform:none; }
.history-text{ font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size:14px; font-weight:500; line-height:1.4; color:#1f2937; }

/* tag statut */
.od-status{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.8rem; font-weight:600; border:1px solid #e5e7eb; background:#f4f6f8; color:#374151; }
.od-status.ok{ border-color:#bbf7d0; background:#ecfdf5; color:#15803d; }
.od-status.warn{ border-color:#fed7aa; background:#fff7ed; color:#9a3412; }

/* responsive liste */
@media (max-width: 900px){
  .od-col-35{ width:40%; }
  .od-col-20{ width:20%; }
  .od-col-15{ width:15%; }
}
@media (max-width: 640px){
  .od-list-header{ display:none; }
  .od-list-row{ flex-wrap:wrap; gap:6px; align-items:flex-start; padding:10px 12px; }
  .od-col-35, .od-col-20, .od-col-15{ width:100%; }
  .od-col-15.text-end{ text-align:left !important; }
}

/* --- Alignement sans icône en 1ʳᵉ colonne --- */
.od-list-header .od-col-left{ padding-left: 12px; }  /* plus de réserve pour icône */
.od-list-row   .od-col-left{ padding-left: 12px; }

/* Colonne “Action” à droite, les autres centrées sauf la 1ʳᵉ */
.od-list-header > div,
.od-list-row   > div{ justify-content:center; }
.od-col-left{ justify-content:flex-start !important; text-align:left !important; }

/* ==== Alignement parfait des colonnes (header vs rows) ==== */
.od-list-header,
.od-list-row{
  padding: 0 12px;
}
.od-list-header > div,
.od-list-row   > div{
  display: flex;
  align-items: center;
}

/* Réserve l'icône invisible dans header */
.od-list-header .od-col-left{
  position: relative;
}
.od-list-header .od-col-left::before{
  content: "";
  width: 22px;
  height: 22px;
  margin-right: 8px;
  flex: 0 0 22px;
}
.od-list-row .od-col-left .od-cell-left{
  display: flex;
  align-items: center;
}
.od-list-row .od-col-left .od-cell-left svg{
  width: 22px;
  height: 22px;
  margin-right: 8px;
  flex: 0 0 22px;
}


/* Améliore le contraste de l'élément sélectionné dans l'autocomplete */
.ac-menu .dropdown-item.ac-item.active,
.ac-menu .dropdown-item.ac-item.active:focus,
.ac-menu .dropdown-item.ac-item.active:hover {
  background-color: #0d6efd !important; /* bleu Bootstrap */
  color: #fff !important;               /* texte blanc bien lisible */
}

/* Survol "normal" (non actif) */
.ac-menu .dropdown-item.ac-item:hover {
  background-color: #42444b;
  color: #f6f8f9;
}

.progress-bar {
  width: calc(var(--ratio, 0) * 1%);
  transition: width .25s ease;
}

.bg-success { background-color: #198754 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-danger  { background-color: #dc3545 !important; }

/* =========================
   AUTH
========================== */
.auth-page{
  background:#f6f8fb;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin:0;
}

.auth-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:56px 18px;
  gap:18px;
}

/* Brand top */
.auth-brand{
  width:100%;
  max-width: 920px;
  display:flex;
  justify-content:center;
}

.auth-brand-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

.auth-brand-logo{
  width:54px;
  height:54px;
  object-fit:contain;
}

.auth-brand-name{
  font-weight:800;
  font-size:28px;
  letter-spacing:-.4px;
  line-height:1.1;
}

.auth-brand-tagline{
  font-size:14px;
  color: rgba(15, 23, 42, .62);
  margin-top:2px;
}

.auth-brand .accent{ color:#f38a1e; }

/* Card */
.auth-card{
  width:100%;
  max-width: 760px;
  background:#fff;
  border:1px solid rgba(15, 23, 42, .14);
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10);
  padding:28px;
}

.auth-title{
  margin:0 0 6px;
  font-size:23px;
  font-weight:500;
  letter-spacing:-.5px;
  color:#0f172a;
}

.auth-subtitle{
  margin:0 0 18px;
  color: rgba(15, 23, 42, .62);
  font-size:12px;
  text-align:center;
}

.auth-error{
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .25);
  color: rgba(185, 28, 28, .95);
  padding:10px 12px;
  border-radius:12px;
  margin: 0 0 14px;
  font-weight:600;
  font-size:14px;
}

/* Form */
.auth-form .form-row{
  margin: 12px 0;
}

.auth-form label{
  display:block;
  font-weight:700;
  margin: 0 0 6px;
  color:#0f172a;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"]{
  width:100%;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(15, 23, 42, .18);
  padding: 10px 12px;
  font-size:15px;
  outline:none;
  background:#fff;
}

.auth-form input:focus{
  border-color: rgba(243,138,30,.65);
  box-shadow: 0 0 0 4px rgba(243,138,30,.16);
}

.auth-links{
  margin-top: 10px;
  margin-bottom: 14px;
  text-align:center;
}

.auth-links a{
  color:#f38a1e;
  font-weight:700;
  text-decoration:none;
}
.auth-links a:hover{ text-decoration:underline; }

/* Submit button */
.auth-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;
  border-radius:12px;
  border:1px solid #f38a1e;
  background:#f38a1e;
  color:#fff;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  cursor:pointer;
}

.auth-submit:hover{ filter: brightness(1.04); }

.auth-submit.is-secondary{
  background: transparent;
  color:#0f172a;
  border:1px solid rgba(15, 23, 42, .18);
}

.auth-submit.is-secondary:hover{
  background: rgba(15, 23, 42, .04);
}

/* Logged-out actions */
.auth-actions{
  display:flex;
  gap:10px;
  margin-top: 8px;
}

.auth-actions .auth-submit{
  width: 100%;
}

/* Mobile */
@media (max-width: 520px){
  .auth-container{ padding: 34px 14px; }
  .auth-card{ padding: 20px; }
  .auth-title{ font-size:28px; }
  .auth-brand-name{ font-size:24px; }
  .auth-brand-logo{ width:48px; height:48px; }
  .auth-actions{ flex-direction:column; }
}

/* =========================================================
   Auth pages — version compacte
   ========================================================= */

/* Container : remonter l’ensemble */
.auth-container{
  padding-top: 24px;
}

/* Card */
.auth-card{
  margin-top: 0;
  padding-top: 18px;
}

/* Titres */
.auth-title{
  margin: 0 0 6px 0;
}

.auth-subtitle{
  margin: 0 0 12px 0;
}

/* Form */
.auth-form .form-row{
  margin-bottom: 10px;
}

/* Labels */
.auth-form label{
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}

/* Inputs */
.auth-form input{
  padding: 10px 12px;
  height: 42px;
  font-size: 15px;
  border-radius: 10px;
}

/* Bouton principal */
.auth-submit{
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 12px;
}


/* =========================
   Auth forms — compact (sans Bootstrap)
========================= */
.auth-form .field{
  margin-bottom: 8px;   /* équivalent mb-1 */
}

.auth-form .field label{
  display:block;
  font-size: 12px;      /* small */
  margin-bottom: 4px;   /* mb-1 */
  color: rgba(0,0,0,.72);
  font-weight: 600;
}

.auth-form .field .req{
  color: #dc3545; /* rouge */
  font-weight: 700;
  margin-left: 4px;
}

.auth-form .field input,
.auth-form .field textarea{
  width: 100%;
  height: 34px;          /* “form-control-sm” */
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  outline: none;
  font: inherit;
}

.auth-form .field textarea{
  height: auto;
  min-height: 34px;
  resize: vertical;
}

.auth-form .field input:focus,
.auth-form .field textarea:focus{
  border-color: rgba(243,138,30,.55);
  box-shadow: 0 0 0 3px rgba(243,138,30,.18);
}

.auth-form .field-error{
  margin-top: 4px;
  color: #dc3545;
  font-size: 12px;
}

.auth-form .field-hint{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.auth-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}
.auth-actions .auth-submit{
  padding: 9px 14px; /* proche btn-sm */
}

/* Bouton OneDesk (orange) */
.btn-onedesk{
  background: #f38a1e !important;
  border-color: #f38a1e !important;
  color: #fff !important;
  font-weight: 600;
}

.btn-onedesk:hover,
.btn-onedesk:focus{
  background: #e57e14 !important;
  border-color: #e57e14 !important;
  color: #fff !important;
}

.btn-onedesk:active{
  background: #d97410 !important;
  border-color: #d97410 !important;
  color: #fff !important;
}

.btn-onedesk:disabled,
.btn-onedesk.disabled{
  opacity: .7;
}