/* =============================================================================
   LibreBooking — thème « La Ruche »
   D'après la maquette Claude Design « LibreBooking La Ruche », adaptée au HTML
   réel de LibreBooking v7.2.0 (Bootstrap 5.3).

   Fichiers :  Web/css/custom-style.css   (ce fichier, chargé automatiquement)
               Web/css/fonts/*.woff2      (polices hébergées sur le serveur)

   Polices : Geist et Geist Mono (Vercel), Bricolage Grotesque (Mathieu Triay),
             toutes sous licence SIL Open Font License 1.1.
   ========================================================================== */

/* ---------------------------------------------------------------- Polices */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- Variables */
:root {
  --lr-orange: #f28c45;
  --lr-orange-600: #e57a30;
  --lr-orange-700: #b4530f;
  --lr-orange-800: #8a3d08;
  --lr-orange-text: #9a4510;
  --lr-orange-50: #fde3cf;
  --lr-orange-25: #fdf1e7;
  --lr-ink: #17181c;
  --lr-ink-2: #2a2b32;
  --lr-ink-3: #25262c;
  --lr-nav-text: #b9bac2;
  --lr-muted: #6b6c75;
  --lr-muted-2: #8a8b93;
  --lr-paper: #f4f3ef;
  --lr-paper-2: #faf9f6;
  --lr-line: #e3e1da;
  --lr-line-soft: #f0efea;
  --lr-field: #dcdad3;
  --lr-blue-bg: #eef3ff;
  --lr-blue-fg: #2c3e78;
  --lr-blue-bd: #c9d6ff;
  --lr-radius: 16px;
  --lr-shadow: 0 1px 2px rgba(23, 24, 28, .04), 0 8px 24px rgba(23, 24, 28, .05);
  --lr-shadow-pop: 0 12px 32px rgba(23, 24, 28, .12);
  --lr-ring: 0 0 0 4px rgba(242, 140, 69, .22);
  --lr-hatch: repeating-linear-gradient(135deg, rgba(23, 24, 28, .045) 0 6px, transparent 6px 12px);
  --lr-font: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --lr-font-display: 'Bricolage Grotesque', var(--lr-font);
  --lr-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Couleurs du planning (variables définies par librebooking.css) */
  --color-lines: var(--lr-line-soft);
  --reservable: #ffffff;
  --unreservable: #ecebe5;
  --reserved: #f3f2ee;
  --reservedMine: var(--lr-orange);
  --reservedParticipating: var(--lr-orange-50);
  --reservedPending: var(--lr-blue-bg);
  --pasttime: var(--lr-paper-2);
  --hiliteReservation: var(--lr-orange-25);
  --label-text-on-light: var(--lr-ink);
  --label-text-on-dark: var(--lr-orange-text);
}

/* LibreBooking colore l'interface avec --primary selon le thème choisi en
   administration (attribut data-bs-theme du body) : on le remplace ici. */
body[data-bs-theme] {
  --primary: var(--lr-orange-700);
  --primary-hover: var(--lr-orange-800);
  --primary-disabled: #ecc9ad;
  --text-color-btn: var(--lr-ink);

  --bs-primary: var(--lr-orange);
  --bs-primary-rgb: 242, 140, 69;
  --bs-body-font-family: var(--lr-font);
  --bs-body-color: var(--lr-ink);
  --bs-body-color-rgb: 23, 24, 28;
  --bs-body-bg: var(--lr-paper);
  --bs-secondary-color: var(--lr-muted);
  --bs-border-color: var(--lr-line);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 14px;
  --bs-link-color: var(--lr-orange-700);
  --bs-link-color-rgb: 180, 83, 15;
  --bs-link-hover-color: var(--lr-orange-800);
  --bs-link-hover-color-rgb: 138, 61, 8;
  --bs-focus-ring-color: rgba(242, 140, 69, .25);

  font-family: var(--lr-font);
  font-size: 14px;
  color: var(--lr-ink);
  background-color: var(--lr-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-bs-theme] :is(h1, h2, h3, .h1, .h2, .h3, .modal-title, .card-title, #schedule-title) {
  font-family: var(--lr-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body[data-bs-theme] :is(a, .btn):focus-visible {
  outline: 2px solid var(--lr-orange-700);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- En-tête */
/* LibreBooking affiche le logo dans un bandeau au-dessus du menu : les deux
   bandeaux prennent le même fond sombre pour former un seul en-tête. */
body[data-bs-theme] div:has(> a.navbar-brand) {
  margin: 0 !important;
  padding: 14px 28px 6px;
  background: var(--lr-ink);
  color: var(--lr-paper);
}
body[data-bs-theme] div:has(> a.navbar-brand) img.logo {
  max-height: 32px;
  width: auto;
}
body[data-bs-theme] div:has(> a.navbar-brand) .border-start {
  border-color: rgba(255, 255, 255, .14) !important;
}
body[data-bs-theme] div:has(> a.navbar-brand) h5 {
  font-family: var(--lr-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
body[data-bs-theme] div:has(> a.navbar-brand) h5 a.link-primary {
  color: var(--lr-paper) !important;
}
body[data-bs-theme] div:has(> a.navbar-brand) h5 + h5 a.link-primary {
  color: var(--lr-nav-text) !important;
  font-weight: 500;
}

body[data-bs-theme] nav.navbar {
  background: var(--lr-ink) !important;
  box-shadow: none !important;
  border: 0;
  padding: 4px 20px 12px !important;
}
body[data-bs-theme] nav.navbar .nav-link {
  color: var(--lr-nav-text) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px !important;
  border-radius: 8px;
  white-space: nowrap;
}
body[data-bs-theme] nav.navbar .nav-link:hover,
body[data-bs-theme] nav.navbar .nav-link:focus,
body[data-bs-theme] nav.navbar .show > .nav-link {
  color: #ffffff !important;
  background: var(--lr-ink-3);
}
body[data-bs-theme] nav.navbar :is(.nav-link.active, .nav-item.active > .nav-link) {
  color: #ffffff !important;
  background: var(--lr-ink-2);
}
body[data-bs-theme] nav.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .2);
}
body[data-bs-theme] nav.navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* ------------------------------------------------------------ Menus déroulants */
body[data-bs-theme] .dropdown-menu {
  border: 1px solid var(--lr-line);
  border-radius: 14px;
  padding: 6px;
  font-size: 13px;
  box-shadow: var(--lr-shadow-pop);
}
body[data-bs-theme] .dropdown-item {
  color: var(--lr-ink);
  border-radius: 8px;
  padding: 7px 10px;
}
body[data-bs-theme] .dropdown-item:is(:hover, :focus, :focus-visible) {
  color: var(--lr-ink);
  background-color: var(--lr-orange-25);
}
body[data-bs-theme] .dropdown-item:is(.active, :active) {
  color: var(--lr-ink);
  background-color: var(--lr-orange-50);
}

/* ----------------------------------------------------------------- Boutons */
body[data-bs-theme] .btn {
  font-weight: 600;
}
body[data-bs-theme] :is(.btn-primary, .btn-success) {
  --bs-btn-color: var(--lr-ink);
  --bs-btn-bg: var(--lr-orange);
  --bs-btn-border-color: var(--lr-orange);
  --bs-btn-hover-color: var(--lr-ink);
  --bs-btn-hover-bg: var(--lr-orange-600);
  --bs-btn-hover-border-color: var(--lr-orange-600);
  --bs-btn-active-color: var(--lr-ink);
  --bs-btn-active-bg: var(--lr-orange-600);
  --bs-btn-active-border-color: var(--lr-orange-600);
  --bs-btn-disabled-color: var(--lr-ink);
  --bs-btn-disabled-bg: var(--primary-disabled);
  --bs-btn-disabled-border-color: var(--primary-disabled);
  --bs-btn-focus-shadow-rgb: 242, 140, 69;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 4px 12px rgba(242, 140, 69, .3);
}
body[data-bs-theme] :is(.btn-secondary, .btn-dark) {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--lr-ink);
  --bs-btn-border-color: var(--lr-ink);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--lr-ink-2);
  --bs-btn-hover-border-color: var(--lr-ink-2);
  --bs-btn-active-bg: var(--lr-ink-2);
  --bs-btn-active-border-color: var(--lr-ink-2);
}
body[data-bs-theme] :is(.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-default) {
  --bs-btn-color: var(--lr-ink);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--lr-field);
  --bs-btn-hover-color: var(--lr-ink);
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: var(--lr-ink);
  --bs-btn-active-color: var(--lr-ink);
  --bs-btn-active-bg: var(--lr-paper);
  --bs-btn-active-border-color: var(--lr-ink);
}
body[data-bs-theme] .btn-link {
  --bs-btn-color: var(--lr-orange-700);
  --bs-btn-hover-color: var(--lr-orange-800);
}

/* -------------------------------------------- Cartes, fenêtres, accordéons */
body[data-bs-theme] :is(.card, .modal-content, .accordion-item, #login-box) {
  border: 1px solid var(--lr-line);
  border-radius: var(--lr-radius);
}
body[data-bs-theme] :is(.card, .modal-content, .accordion-item).shadow,
body[data-bs-theme] :is(.card, .modal-content, .accordion-item).shadow-sm,
body[data-bs-theme] :is(.card, .modal-content, .accordion-item) {
  box-shadow: var(--lr-shadow) !important;
}
body[data-bs-theme] .modal-content {
  box-shadow: var(--lr-shadow-pop) !important;
}
body[data-bs-theme] :is(.card-header, .modal-header) {
  background: #ffffff;
  color: var(--lr-ink);
  border-bottom: 1px solid var(--lr-line-soft);
  font-weight: 600;
}
body[data-bs-theme] :is(.card-footer, .modal-footer) {
  background: #ffffff;
  border-top: 1px solid var(--lr-line-soft);
}
body[data-bs-theme] .accordion {
  --bs-accordion-border-color: var(--lr-line);
  --bs-accordion-border-radius: var(--lr-radius);
  --bs-accordion-inner-border-radius: calc(var(--lr-radius) - 1px);
  --bs-accordion-btn-focus-box-shadow: var(--lr-ring);
  --bs-accordion-active-bg: var(--lr-orange-25);
  --bs-accordion-active-color: var(--lr-ink);
}
body[data-bs-theme] .list-group {
  --bs-list-group-border-color: var(--lr-line-soft);
  --bs-list-group-active-bg: var(--lr-ink);
  --bs-list-group-active-border-color: var(--lr-ink);
}

/* ------------------------------------------------------------- Formulaires */
body[data-bs-theme] :is(.form-control, .form-select) {
  border-color: var(--lr-field);
  background-color: #ffffff;
  color: var(--lr-ink);
}
body[data-bs-theme] :is(.form-control, .form-select):focus {
  border-color: var(--lr-orange);
  box-shadow: var(--lr-ring);
}
body[data-bs-theme] .input-group-text {
  background: var(--lr-paper);
  border-color: var(--lr-field);
  color: var(--lr-muted);
}
body[data-bs-theme] .form-check-input:checked {
  background-color: var(--lr-orange);
  border-color: var(--lr-orange);
}
body[data-bs-theme] .form-check-input:focus {
  border-color: var(--lr-orange);
  box-shadow: var(--lr-ring);
}
body[data-bs-theme] .form-label,
body[data-bs-theme] label {
  font-weight: 500;
}
body[data-bs-theme] .select2-container--default .select2-selection {
  border-color: var(--lr-field);
  border-radius: 10px;
}

/* ---------------------------------------------------------------- Tableaux */
body[data-bs-theme] .table {
  --bs-table-border-color: var(--lr-line-soft);
  --bs-table-hover-bg: var(--lr-orange-25);
  --bs-table-striped-bg: var(--lr-paper-2);
  --bs-table-active-bg: var(--lr-orange-50);
}
body[data-bs-theme] .table > thead :is(th, td) {
  background: #ffffff;
  color: var(--lr-muted);
  font-weight: 500;
  font-size: 12.5px;
  border-bottom: 1px solid var(--lr-line);
}

/* --------------------------------------------------------------- Pagination */
body[data-bs-theme] .page-link {
  color: var(--lr-ink);
  border-color: var(--lr-line);
}
body[data-bs-theme] .page-link:hover {
  color: var(--lr-ink);
  background-color: var(--lr-orange-25);
  border-color: var(--lr-field);
}
body[data-bs-theme] .page-link:focus {
  color: var(--lr-ink) !important;
  box-shadow: var(--lr-ring);
}
body[data-bs-theme] :is(.active > .page-link, .page-link.active) {
  color: #ffffff;
  background-color: var(--lr-ink);
  border-color: var(--lr-ink);
}
body[data-bs-theme] .disabled > .page-link {
  color: var(--lr-muted-2);
  border-color: var(--lr-line);
}

/* ---------------------------------------------------- Badges, alertes, divers */
body[data-bs-theme] .badge {
  border-radius: 999px;
  font-weight: 600;
}
body[data-bs-theme] :is(.bg-primary, .text-bg-primary) {
  background-color: var(--lr-orange) !important;
  color: var(--lr-ink) !important;
}
body[data-bs-theme] .alert {
  border-radius: 12px;
}
/* Bandeaux de date jaunes du tableau de bord */
body[data-bs-theme] .timespan.bg-warning {
  background-color: var(--lr-orange-25) !important;
  color: var(--lr-orange-800);
  border-color: var(--lr-line-soft) !important;
}
body[data-bs-theme] footer {
  color: var(--lr-muted);
}

/* -------------------------------------------------------- Sélecteur de date */
body[data-bs-theme] .flatpickr-calendar {
  border-radius: 14px;
  box-shadow: var(--lr-shadow-pop);
  font-family: var(--lr-font);
}
body[data-bs-theme] .flatpickr-day.today {
  border-color: var(--lr-orange);
}
body[data-bs-theme] .flatpickr-day:is(.selected, .startRange, .endRange),
body[data-bs-theme] .flatpickr-day:is(.selected, .startRange, .endRange):hover {
  background: var(--lr-ink);
  border-color: var(--lr-ink);
  color: #ffffff;
}
body[data-bs-theme] .flatpickr-day:hover {
  background: var(--lr-orange-25);
  border-color: var(--lr-orange-25);
}
body[data-bs-theme] .ui-datepicker .ui-state-active {
  background: var(--lr-ink);
  border-color: var(--lr-ink);
  color: #ffffff;
}
body[data-bs-theme] .ui-datepicker .ui-state-highlight {
  background: var(--lr-orange-25);
  border-color: var(--lr-orange);
  color: var(--lr-ink);
}

/* ================================================================ Planning */
#page-schedule #schedule-title {
  font-size: 30px;
  line-height: 1.1;
}
#page-schedule .schedule-dates .change-date {
  color: var(--lr-ink) !important;
}
#page-schedule .schedule-dates .change-date:hover {
  color: var(--lr-orange-700) !important;
}

/* La grille : carte blanche aux lignes discrètes */
#page-schedule table.reservations {
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--lr-line), var(--lr-shadow);
  margin-bottom: 20px;
}
#page-schedule table.reservations td {
  border-color: var(--lr-line-soft);
}
#page-schedule table.reservations td.resdate {
  background: #ffffff;
  color: var(--lr-muted);
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 14px;
}
#page-schedule table.reservations td.reslabel {
  background: #ffffff;
  color: var(--lr-muted-2);
  font-family: var(--lr-font-mono);
  font-size: 11.5px;
}
#page-schedule table.reservations tr.today td.resdate,
#page-schedule table.reservations td.today {
  background: var(--lr-ink);
  color: #ffffff;
}
#page-schedule table.reservations tr.today td.reslabel {
  background: var(--lr-orange-25);
  color: var(--lr-orange-700);
}
#page-schedule table.reservations td.resourcename {
  background: #ffffff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 0 14px;
}
#page-schedule table.reservations td.resourcename a {
  color: var(--lr-ink);
}
#page-schedule table.reservations td.resourcename a:hover {
  color: var(--lr-orange-700);
}
#page-schedule table.reservations td.resourcename.hilite {
  background: var(--lr-orange-25);
}

/* Créneaux vides */
#page-schedule td.reservable.hilite,
#page-schedule td.reservable.clicked,
#page-schedule .ui-selecting,
#page-schedule .ui-selected {
  background-color: var(--lr-orange-25);
}
#page-schedule td.pasttime,
#page-schedule td.unreservable {
  background: var(--lr-hatch), var(--lr-paper-2);
}

/* Réservations : blocs arrondis, séparés par une bordure transparente */
#page-schedule .event {
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 12px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .07);
  transition: filter .12s ease;
}
#page-schedule .event:hover {
  filter: brightness(.97);
}
#page-schedule .event.reserved {
  background-color: var(--reserved);
  color: var(--lr-ink);
}
#page-schedule .event.reserved.mine {
  background-color: var(--lr-orange);
  color: var(--lr-ink);
  box-shadow: inset 0 0 0 1px var(--lr-orange-600);
}
#page-schedule .event.reserved.participating {
  background-color: var(--lr-orange-50);
  color: var(--lr-orange-text);
}
#page-schedule .event.reserved.pending {
  background-color: var(--lr-blue-bg);
  color: var(--lr-blue-fg);
  box-shadow: inset 0 0 0 1px var(--lr-blue-bd);
}
#page-schedule .event.past {
  opacity: .6;
}
#page-schedule .event.unreservable {
  background: var(--lr-hatch), #ecebe5;
  background-clip: padding-box;
  color: var(--lr-muted);
}
#page-schedule .event.reserved.hilite {
  filter: brightness(.95);
}
#page-schedule .event :is(.reservation-new, .reservation-updated) {
  font-family: var(--lr-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--lr-ink);
  color: #ffffff;
}

/* Légende en pastilles */
#page-schedule div.legend {
  width: auto;
  min-width: 96px;
  padding: 4px 12px !important;
  border-color: var(--lr-line) !important;
  border-radius: 999px !important;
  font-size: 12.5px;
  font-weight: 500;
}
#page-schedule div.legend.pasttime,
#page-schedule div.legend.unreservable {
  background: var(--lr-hatch), var(--lr-paper-2);
}
#page-schedule div.legend.reserved.participating {
  color: var(--lr-orange-text);
}
#page-schedule div.legend.reserved.pending {
  color: var(--lr-blue-fg);
}

/* --------------------------------------------------------------- Mobile */
@media (max-width: 767.98px) {
  body[data-bs-theme] div:has(> a.navbar-brand) {
    padding: 12px 16px 4px;
  }
  body[data-bs-theme] nav.navbar {
    padding: 4px 12px 10px !important;
  }
  #page-schedule #schedule-title {
    font-size: 24px;
  }
}