/* ── Sidebar ────────────────────────────────────────────── */
:root {
  --sidebar-width: 220px;
  --sidebar-collapsed: 60px;
  --sidebar-accent: #0d6efd;
}

/* Layout grid */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  transition: width .25s ease, min-width .25s ease, max-width .25s ease;
}
.main-content {
  flex: 1;
  min-width: 0;
}

/* Items */
.sidebar-nav .list-group-item { border: 0; border-radius: 0; position: relative; white-space: nowrap; }
.sidebar-nav .list-group-item-action { border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
.sidebar-nav .list-group-item-action:hover { background: #f3f6ff; border-left-color: #c5d5f7; }
.sidebar-nav .list-group-item-action.active { background: #e8f0fe; border-left-color: var(--sidebar-accent); color: var(--sidebar-accent); font-weight: 600; }

/* Sub-items (indented) */
.sidebar-sub-item { padding-left: 2.4rem !important; font-size: .9rem; }

/* Separator */
.sidebar-separator { height: 0; border-top: 1px solid #dee2e6; margin: .35rem 0; }

/* Group toggle (Paramétrage header) */
.sidebar-group-toggle { display: flex; align-items: center; font-weight: 600; }
.sidebar-group-toggle .sidebar-chevron { font-size: .7rem; transition: transform .25s ease; }
.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }

/* Section title (Super Admin) */
.sidebar-section-title { border: 0; background: transparent; }

/* ── Responsive: icônes seules < 768px ──────────────────── */
@media (max-width: 767.98px) {
  .sidebar {
    width: var(--sidebar-collapsed);
    min-width: var(--sidebar-collapsed);
    max-width: var(--sidebar-collapsed);
    overflow: hidden;
  }
  .sidebar .nav-label { display: none; }
  .sidebar .sidebar-chevron { display: none; }
  .sidebar-nav .list-group-item { text-align: center; padding-left: .5rem; padding-right: .5rem; }
  .sidebar-nav .list-group-item i.bi { margin: 0 !important; font-size: 1.2rem; }
  .sidebar-sub-item { padding-left: .5rem !important; }
  .sidebar-section-title { font-size: 0 !important; text-align: center; }
  .sidebar-section-title i.bi { font-size: 1rem; margin: 0 !important; }
  /* On mobile the collapse group stays always open so icons are visible */
  .sidebar #menuParametrage { display: block !important; height: auto !important; }
  .sidebar .sidebar-group-toggle { display: none; }
}

/* Card polish */
.card { border-radius: 1rem; overflow: hidden;}
.btn { border-radius: .75rem; }
.badge { border-radius: .5rem; }

/* Tarifs grille */
.rate-toolbar { gap: .5rem; }
.rate-grid-wrapper { overflow: auto; border: 1px solid #e9ecef; border-radius: .5rem; }
.rate-grid { display: grid; grid-auto-rows: auto; }
.rate-grid .unit-col { position: sticky; left: 0; z-index: 2; background: #fff; max-width: 200px; min-width: 200px; border-right: 1px solid #e9ecef; }
.rate-grid .month-header { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid #e9ecef; }
.rate-grid .day-cell { width: 44px; height: 44px; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.rate-grid .day-cell.free { background: #f0f0f0; }
.rate-grid .day-cell.alt { background: #ffffff; }
.rate-grid .day-cell.stop { background: #ffe5e5; color: #b60000; }
.rate-grid .day-cell .los { font-weight: 600; font-size: 9px; padding: 0 2px; border-radius: 3px; background: #dee2e6; color: #343a40; }
.rate-grid .day-cell.cta { background-image: linear-gradient(135deg, transparent 49%, rgba(13,110,253,.25) 50%, transparent 51%); }
.rate-grid .day-cell.ctd { background-image: linear-gradient(45deg, transparent 49%, rgba(13,110,253,.25) 50%, transparent 51%); }
.rate-grid .day-cell.cta.ctd { background-image: linear-gradient(135deg, transparent 49%, rgba(13,110,253,.25) 50%, transparent 51%), linear-gradient(45deg, transparent 49%, rgba(13,110,253,.25) 50%, transparent 51%); }
.rate-grid .day-cell.stop .bi { font-size: 12px; }
.rate-grid .row-alt { background: #ffffff; }

/* Day header row (numbers + weekday short label) */
.rate-grid .day-head { width: 44px; height: 64px; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #e9ecef; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; line-height: 1.1; color: #495057; }
.rate-grid .day-head-left { border-bottom: 1px solid #e9ecef; background: #fff; }
.rate-grid .day-head .dh-num { font-weight: 600; }
.rate-grid .day-head .dh-wd { font-size: 9px; color: #6c757d; }
.rate-grid .day-head.weekend { background: #f5f7fb; }

.sticky-months { position: sticky; top: 0; z-index: 4; background: #fff; }

/* Mini-calendriers LOS dans les tableaux par logement */
.los-days { display: grid; grid-auto-rows: 44px; gap: 0; /* aligner avec l’en-tête: pas de scroll interne */ overflow-x: visible; background: #fff; }
.los-days .day-cell { width: 44px; height: 44px; border-right: 1px solid #f1f1f1; display: flex; align-items: center; justify-content: center; font-size: 12px; background: #f8f9fa; }
.los-days .day-cell.weekend { background: #d5d5d5; }
.los-days .day-cell.stop { background: #ffe5e5; color: #b60000; }
/* Edition inline (cellules tarifs) + survol éditable factorisé (LOS & Stop) */
.los-days .day-cell.editable,
.stop-days .day-cell.editable { cursor: pointer; }
.los-days .day-cell.editable:hover,
.stop-days .day-cell.editable:hover { outline: 2px solid rgba(13,110,253,.35); z-index: 1; }
.los-days .day-cell.editing { padding: 0 }
.los-days .day-cell .cell-editor {
  width: 100%;
  height: 100%;
  box-sizing: border-box;             /* évite tout décalage avec la bordure */
  border: 1px solid #dee2e6; /* bordure visible pour indiquer l’édition */
  outline: none;
  background: #fff;
  text-align: center;
  font-size: 12px;
  border-radius: .25rem;              /* léger arrondi cohérent Bootstrap */
}
.los-days .day-cell.editing .cell-editor {
  /* Ajoute un espace autour de l’input pour le distinguer visuellement */
  margin: 4px;                        /* crée un retrait net dans la case */
  width: calc(100% - 8px);            /* conserve l’alignement sans dépasser */
  height: calc(100% - 8px);
}
.los-days .day-cell .cell-editor:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); /* anneau focus Bootstrap-like */
}
/* Sélection groupée (unifiée) pour LOS, Stop et Status: bordure 2px continue sans bordures internes
   On reprend la logique de stop-days (avec compensations de padding) et on l'applique aussi à los-days et status-days */
.los-days .day-cell.sel-on,
.stop-days .day-cell.sel-on,
.status-days .day-cell.sel-on {
  background-color: rgba(13,110,253,.12);
}
.los-days .day-cell.sel-first,
.los-days .day-cell.sel-mid,
.los-days .day-cell.sel-last,
.stop-days .day-cell.sel-first,
.stop-days .day-cell.sel-mid,
.stop-days .day-cell.sel-last,
.status-days .day-cell.sel-first,
.status-days .day-cell.sel-mid,
.status-days .day-cell.sel-last {
  border-top: 2px solid #0d6efd;
  border-bottom: 2px solid #0d6efd;
  border-left: 0; /* pas de bordure interne */
  border-right: 0; /* pas de bordure interne */
  padding-right: 1px; /* compensation visuelle interne */
}
.status-days .day-cell.sel-mid .pos-depart { top: 2px;  }
.status-days .day-cell.sel-mid .pos-arrive {bottom: 2px; right: 5px;}

.los-days .day-cell.sel-first,
.stop-days .day-cell.sel-first,
.status-days .day-cell.sel-first {
  padding-right: 3px; /* compensation accrue en tête */
  border-left: 2px solid #0d6efd;
}


.los-days .day-cell.sel-last,
.stop-days .day-cell.sel-last,
.status-days .day-cell.sel-last {
  padding-left: 2px; /* compensation en fin de sélection */
  border-right: 2px solid #0d6efd;
}
.status-days .day-cell.sel-first .pos-arrive {bottom: 2px; right: 5px; }
.status-days .day-cell.sel-last .pos-depart { top: 2px; left: 4px; }
.status-days .day-cell.sel-last .pos-arrive {bottom: 2px; right: 3px; }
.status-days .day-cell.sel-first .pos-depart { top: 2px; left: 2px; }


/* En-têtes mois/jours pour les tableaux LOS par logement */
.los-month-header { background: #fff; padding: .25rem 0; }
.los-day-heads { display: grid; grid-auto-rows: 44px; }
.los-day-heads .day-head { width: 44px; height: 44px; border-right: 1px solid #f1f1f1; border-top: 1px solid #e9ecef; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; line-height: 1.1; color: #495057; }
.los-day-heads .day-head.last-of-month { border-right: 2px solid #999; }
.los-day-heads .day-head .dh-num { font-weight: 600; }
.los-day-heads .day-head .dh-wd { font-size: 9px; color: #6c757d; }
.los-day-heads .day-head.weekend { background: #dfdfdf; }

/* Tableaux par logement : colonnes Nuitée et Action élargies + sticky */
.unit-rate-table { border-collapse: separate; border-spacing: 0; }
.unit-rate-table th, .unit-rate-table td { background: #fff; }
.unit-rate-table .sticky-col { position: sticky; z-index: 2; background: #fff; }
.unit-rate-table .col-night { width: 220px; min-width: 220px; max-width: 220px; }
.unit-rate-table .col-legend { font-size: 14px; text-align: right }
.unit-rate-table thead th.col-night.sticky-col, .unit-rate-table tbody td.col-night.sticky-col, .unit-rate-table tbody td.col-legend.sticky-col { left: 0; border-right: 1px solid #e9ecef; }

/* Colonne des jours: le contenu gère la largeur (grilles 22px) et la table-responsive porte le scroll */
.unit-rate-table .days-col { white-space: nowrap; padding: 0 !important; }

/* Enlever padding autour des en-têtes days-col aussi */
.unit-rate-table thead .days-col { padding: 0 !important; }

/* Ligne Statut par logement */
.status-days { display: grid; grid-auto-rows: 44px; gap: 0; overflow-x: visible; background: #fff; }
.status-days .day-cell { width: 44px; height: 44px; border-right: 1px solid #f1f1f1; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #ffffff; position: relative; }
.status-days .day-cell.stop { background: #ffe5e5; color: #b60000; }
/* Positionnement diagonal des icônes statut (départ matin / arrivée après-midi) */
.status-days .pos-depart { position: absolute; top: 4px; left: 4px; line-height: 1; }
.status-days .pos-arrive { position: absolute; bottom: 4px; right: 4px; line-height: 1; }
.status-days .day-cell .bi { font-size: 16px; margin: 0; }
/* Effet diagonal supplémentaire par padding suggéré */
.status-days .day-cell.pad-depart { padding-bottom: 8px; }
.status-days .day-cell.pad-arrive { padding-top: 8px; }
/* Masquer les icônes selon stop (fermeture) :
   - stop-pm (jour J fermé) => masquer l’icône d’arrivée (après‑midi)
   - stop-am (lendemain d’un jour fermé) => masquer l’icône de départ (matin) */
.status-days .day-cell.stop-pm .pos-arrive { display: none !important; }
.status-days .day-cell.stop-am .pos-depart { display: none !important; }
.status-days .day-cell.stop-pm { background: linear-gradient(135deg,rgba(0,0,0,0) 0 50%,#ffe5e5 50% 100%); }
.status-days .day-cell.stop-am { background: linear-gradient(135deg,#ffe5e5 0 50%,rgba(0,0,0,0) 50% 100%); }
.status-days .day-cell.stop-am.stop-pm { background: linear-gradient(135deg,#ffe5e5 0 50%,#ffe5e5 50% 100%); }

/* Diagonales de statut via pseudo-éléments (matin/après-midi) */
.status-days .day-cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(135deg, transparent 49%, rgba(0, 0, 0, 0.10) 50%, transparent 51%);}

/* Ligne Fermeture par logement */
.stop-days { display: grid; grid-auto-rows: 44px; gap: 0; overflow-x: visible; background: #fff; }
.stop-days .day-cell { width: 44px; height: 44px; border-right: 1px solid #f1f1f1; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #e7f6eb; position: relative; }
.stop-days .day-cell.stop { background: #ffe5e5; color: #b60000; }
/* Préréservation (status=2) : fond jaune pâle */
.stop-days .day-cell.prebook { background: #fff3cd; color: #856404; }
/* Sélection pour édition groupée (ligne Fermeture) */
/* Reset des bordures pendant la sélection pour éviter les bordures internes */
/* (les règles ci-dessus couvrent désormais stop-days et los-days) */

/* Mini-modal flottante pour appliquer l'état stop */
.floating-stop-modal {
  position: fixed;
  z-index: 1055; /* au-dessus des cartes, sous les modals bootstrap (1055 < 1060) */
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  padding: .5rem;
  min-width: 240px;
  display: none;
}
.floating-stop-modal .form-select, .floating-stop-modal .btn { height: 32px; padding: .25rem .5rem; }
.floating-stop-modal .title { font-size: .9rem; font-weight: 600; margin-bottom: .5rem; }
.floating-stop-modal .title .bi { font-size: x-large; }
.floating-stop-modal .form-label .bi { font-size: x-large; }
.floating-stop-modal .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

/* Mini-modal flottante pour appliquer un prix LOS */
.floating-price-modal {
  position: fixed;
  z-index: 1055;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  padding: .5rem;
  min-width: 260px;
  display: none;
}
.floating-price-modal .title { font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
.floating-price-modal .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.floating-price-modal .form-control { height: 32px; padding: .25rem .5rem; }

/* Ligne Occupation (résumé occupants + suppléments) */
.occupation-days { display: grid; grid-auto-rows: auto; gap: 0; overflow-x: visible; background: #fff; }
.occupation-days .day-cell { width: 44px; min-height: 64px; border-right: 1px solid #f1f1f1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; background: #ffffff; line-height: 1.1; padding: 2px 2px; }
.occupation-days .day-cell.weekend { background: #e9eef7; }
.occupation-days .day-cell .line { width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.occupation-days .day-cell .line-extra { color: #495057; font-size: 10px; }
.occupation-days .day-cell .bi { font-size: 12px; line-height: 1; }
/* Icônes occupation: tailles distinctes pour adulte/enfant et supplément */
.occupation-days .icon-adult { font-size: 14px; }
.occupation-days .icon-child { font-size: 11px; }
  .occupation-days .icon-extra { font-size: 13px; }

/* =============================
   Disponibilités (availability.php)
   Styles déplacés depuis le inline <style> et factorisés
   Tout est scoping sous #calendar pour éviter les effets de bord
   ============================= */
#calendar {
  --c-border: #e5e7eb;
  --cell: 36px;
  --cell-w: 36px;
  overflow: auto;
}
#calendar .table { border-collapse: collapse; }
#calendar .table th, #calendar .table td { border: 1px solid var(--c-border); }
#calendar .row-name {
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 5;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
}

/* En-tête jour : nom + numéro empilés */
#calendar .day-head {
  width: var(--cell-w);
  text-align: center;
  padding: 4px 0;
  background: #f8f9fa;
  line-height: 1;
  vertical-align: middle;
}
#calendar .day-head .dh-dow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
}
#calendar .day-head .dh-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #212529;
  margin-top: 1px;
}
#calendar .day-head[data-weekend] .dh-dow,
#calendar .day-head[data-weekend] .dh-num { color: #c0392b; }

/* Cellule jour */
#calendar .cell { position: relative; width: var(--cell-w); height: var(--cell); padding: 0; }

/* Abréviation du jour dans la cellule (en bas à droite = zone PM) */
#calendar .daynum {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(0,0,0,.3);
  pointer-events: none;
  line-height: 1;
}
#calendar .full-link,
#calendar .popupCell {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#calendar .popupCell { cursor: pointer; }
#calendar .full-link:hover, #calendar .popupCell:hover {
  background-color: rgba(0,0,0,0.06);
  outline: 1px solid rgba(0,0,0,0.12);
}

/* Popup de conflits (disponibilités) et sélection */
#conflictModal,
#selectionModal {
  display: none; /* toggle via JS: display = 'flex' */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#conflictModal .inner,
#selectionModal .inner { max-width: 400px; }

/* Sélection multi-jours sur Disponibilités (#calendar) */
#calendar .cell.sel-on { background-color: rgba(13,110,253,.12); }
#calendar .cell.sel-first,
#calendar .cell.sel-mid,
#calendar .cell.sel-last {
  background: rgba(13,110,253,.12);
}
#calendar .cell.sel-first { background:linear-gradient(135deg,rgba(0,0,0,0) 0 35%,rgba(13,110,253,.12) 35% 100%); }
#calendar .cell.sel-last  { background:linear-gradient(135deg,rgba(13,110,253,.12) 0 35%,rgba(0,0,0,0) 35% 100%); }

/* Weekend (Sa/Di) — cellules */
#calendar .cell[data-weekend]:not([style*="background"]) { background-color: rgba(0,0,0,.03); }

/* Stop-sell : badge légende */
.legend-stopsell {
  background: #ffc9c9;
  color: #842029;
  border: 1px solid #f5c6cb;
}

/* Vue confortable (toggle) */
#calendar.comfortable { --cell: 46px; --cell-w: 46px; }
#calendar.comfortable .daynum { font-size: 10px; }
#calendar.comfortable .day-head .dh-num { font-size: 14px; }

/* ── Pages d'authentification : connexion et création de compte ──────────────
   Fond sombre : une carte blanche sur bg-light ne se détachait pas et la page
   semblait vide. La couleur vit ici et non en style inline, pour que /login et
   /start ne divergent pas au premier changement. */
.auth-bg { background: #1e2a45; }

/* Le bleu de lien Bootstrap tombe à 3,1:1 sur ce fond, sous le seuil WCAG AA
   de 4,5:1. Ces teintes donnent 8,2:1 au repos et 12,4:1 au survol. */
.auth-bg .auth-link        { color: #9ec5fe; }
.auth-bg .auth-link:hover,
.auth-bg .auth-link:focus  { color: #cfe2ff; }

/* Texte secondaire hors carte : text-muted est illisible sur ce fond. */
.auth-bg .auth-hint        { color: #c3ccdd; }

/* ── Échelle typographique des pages d'authentification ─────────────────────
   Calée sur app.paygreen.fr : formulaire en 12px, titre de carte en 14px/700,
   graisses relevées pour compenser la petite taille. Bootstrap part de 16px
   partout, ce qui donnait des pages sensiblement plus lâches.
   Tout est scopé sous .auth-bg : le back-office garde son échelle. */
.auth-bg .card h1       { font-size: 14px; font-weight: 700; line-height: 21px; }
.auth-bg .card h2       { font-size: 12px; font-weight: 600; }
.auth-bg .card p.small  { font-size: 12px; line-height: 18px; }
.auth-bg .form-label    { font-size: 12px; font-weight: 500; margin-bottom: .35rem; }
.auth-bg .form-text     { font-size: 11px; }
.auth-bg .btn           { font-size: 12px; font-weight: 500; padding: .5rem .875rem; }

/* Hauteur de champ : 12px de police + .5rem de marge intérieure donnent les
   36px de PayGreen sans hauteur figée, donc sans risque de rognage. */
.auth-bg .form-control  { font-size: 12px; padding: .5rem .75rem; }

.auth-bg .auth-hint,
.auth-bg .auth-link     { font-size: 12px; font-weight: 600; line-height: 18px; }

/* iOS Safari agrandit la page au focus d'un champ dont la police est sous 16px,
   et le visiteur doit repincer pour revenir. Sur mobile, les champs repassent
   donc à 16px : même intention, sans le zoom intempestif. */
@media (max-width: 576px) {
    .auth-bg .form-control { font-size: 16px; padding: .5rem .75rem; }
}