/* ════════════════════════════════════════════════════════════════════════
   Hostome UI — couche de composants GLOBAUX (nouvelle base propre)
   ------------------------------------------------------------------------
   - app.css est désormais LEGACY : on n'y ajoute plus de styles.
   - Ce fichier accueille les composants réutilisables sur tout le site
     (boutons, cartes, en-têtes de page, menus, modales, champs…).
   - Chargé APRÈS app.css → surcharge maîtrisée, sans rien casser.
   - Migration progressive, page par page. Rien n'est déplacé sans validation.
   Page de référence visuelle : properties.html
   ════════════════════════════════════════════════════════════════════════ */

/* (vide pour l'instant — les composants globaux seront migrés ici après
   validation de la proposition de répartition.) */

/* ─── Composants GLOBAUX copiés depuis app.css (l.30467–30796) — design-system ui-* ─── */
/* Copie verbatim. app.css conserve la même définition (doublon temporaire accepté). */

.ui-page-header,
.reservation-picker-head,
.booking-editor-head,
.exp2-editbar,
.settings-topbar {
  align-items: center;
  background: var(--ui-bg-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  display: flex;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
}

/* Buttons ---------------------------------------------------------------- */
.ui-button,
.ui-button--primary,
.ui-button--secondary,
.ui-button--ghost,
.ui-button--danger,
.ui-save-button,
.ui-back-button,
:where(.btn, .ms-btn-primary, .ms-btn-ghost, .ms-btn-danger, .pg-action-primary, .pg-action-danger, .pg-action-secondary, .app-modal-btn, .tool-btn, .reservation-filter-btn, .reservation-search-btn, .booking-save-btn) {
  align-items: center;
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--ui-font-md);
  font-weight: 750;
  gap: 8px;
  height: var(--ui-button-height);
  justify-content: center;
  line-height: 1;
  min-height: var(--ui-button-height);
  padding: 0 16px;
  text-decoration: none;
  transition: background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition), transform 0.1s ease;
  white-space: nowrap;
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
:where(.btn, .ms-btn-primary, .ms-btn-ghost, .ms-btn-danger, .pg-action-primary, .pg-action-danger, .pg-action-secondary, .app-modal-btn, .tool-btn, .reservation-filter-btn, .reservation-search-btn, .booking-save-btn):disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.ui-button--primary,
.ui-save-button,
:where(.btn-primary, .pg-action-primary, .ms-btn-primary, .app-modal-btn-primary, .reservation-search-btn, .booking-save-btn.pg-action-primary, .booking-save-btn.ui-save-button) {
  background: var(--ui-color-primary) !important;
  border: 1px solid var(--ui-color-primary) !important;
  box-shadow: 0 4px 10px -3px var(--accent-ring);
  color: #fff !important;
}

.ui-button--primary:hover,
.ui-save-button:hover,
:where(.btn-primary, .pg-action-primary, .ms-btn-primary, .app-modal-btn-primary, .reservation-search-btn, .booking-save-btn.pg-action-primary):hover {
  background: var(--ui-color-primary-hover) !important;
  border-color: var(--ui-color-primary-hover) !important;
}

.ui-button--secondary,
:where(.btn-secondary, .pg-action-secondary, .app-modal-btn-ghost, .ms-btn-ghost) {
  background: var(--ui-bg-control) !important;
  border: 1px solid var(--ui-border-strong) !important;
  box-shadow: none;
  color: var(--t2) !important;
}

.ui-button--secondary:hover,
:where(.btn-secondary, .pg-action-secondary, .app-modal-btn-ghost, .ms-btn-ghost):hover {
  background: var(--ui-bg-muted) !important;
  color: var(--ui-text) !important;
}

.ui-button--ghost,
:where(.btn-ghost, .tool-btn, .reservation-filter-btn) {
  background: var(--ui-bg-control) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm);
  color: var(--t2) !important;
}

.ui-button--ghost:hover,
:where(.btn-ghost, .tool-btn, .reservation-filter-btn):hover {
  background: var(--ui-bg-muted) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

.ui-button--danger,
:where(.btn-danger, .pg-action-danger, .ms-btn-danger) {
  background: var(--ui-bg-control) !important;
  border: 1px solid rgba(224, 69, 123, 0.28) !important;
  color: var(--ui-color-danger) !important;
}

.ui-button--danger:hover,
:where(.btn-danger, .pg-action-danger, .ms-btn-danger):hover {
  background: var(--rose-soft) !important;
  border-color: rgba(224, 69, 123, 0.36) !important;
  color: var(--ui-color-danger-hover) !important;
}

.ui-back-button,
:where(.prop-back-btn, .ms-back-btn, .exp2-back, .experience-mobile-back, .dashboard-side-back, .cln-users-back-btn, .cln-back-btn, .property-back-btn, .inbox-back-btn, .automation-back-btn) {
  align-items: center !important;
  background: var(--ui-bg-control) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  color: var(--t2) !important;
  display: inline-flex !important;
  flex: 0 0 var(--ui-back-size) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  height: var(--ui-back-size) !important;
  justify-content: center !important;
  min-height: var(--ui-back-size) !important;
  min-width: var(--ui-back-size) !important;
  padding: 0 !important;
  width: var(--ui-back-size) !important;
}

.ui-back-button:hover,
:where(.prop-back-btn, .ms-back-btn, .exp2-back, .experience-mobile-back, .dashboard-side-back, .cln-users-back-btn, .cln-back-btn, .property-back-btn, .inbox-back-btn, .automation-back-btn):hover {
  background: var(--ui-bg-muted) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

.ui-back-button i,
:where(.prop-back-btn, .ms-back-btn, .exp2-back, .experience-mobile-back, .dashboard-side-back, .cln-users-back-btn, .cln-back-btn, .property-back-btn, .inbox-back-btn, .automation-back-btn) i {
  font-size: 15px !important;
}

/* Action bars ------------------------------------------------------------- */
.ui-action-bar,
:where(.pg-action-bar, .pg-action-bar.ms-action-bar, .ms-action-bar, .booking-save-bar.pg-action-bar.ms-action-bar, .property-action-bar.ms-action-bar, .tpl-action-bar.ms-action-bar, .res-action-bar.ms-action-bar, .cleaning-settings-action-bar.ms-action-bar, .cleaning-users-action-bar.ms-action-bar, .cleaning-assign-action-bar.ms-action-bar) {
  align-items: center !important;
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-md) !important;
  display: flex !important;
  gap: var(--ui-space-2) !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  margin-top: var(--ui-space-5) !important;
  padding: 14px 18px !important;
  width: 100% !important;
}

.ui-action-bar.is-sticky,
:where(.pg-action-bar, .pg-action-bar.ms-action-bar, .ms-action-bar, .property-action-bar.ms-action-bar, .tpl-action-bar.ms-action-bar, .res-action-bar.ms-action-bar, .cleaning-settings-action-bar.ms-action-bar, .cleaning-users-action-bar.ms-action-bar) {
  bottom: 12px;
  position: sticky;
  z-index: 20;
}

.booking-save-bar.pg-action-bar.ms-action-bar {
  bottom: auto !important;
  position: static !important;
}

/* Cards ------------------------------------------------------------------ */
.ui-card,
:where(.card, .ms-card, .ms-prop-card, .pg-form-section, .booking-card, .book-form-card, .cmd-card, .res-page-card, .reservation-billing-card, .settings-card, .cleaning-detail-card, .cleaning-list-card, .dashboard-detail-card, .tpl-card, .property-sub-card, .property-channel-card, .guest-action-card, .cal-modal, .app-modal) {
  background: var(--ui-bg-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-sm);
}

.ui-card__header,
:where(.card-header, .card-head, .ms-card-head, .pg-form-section-head, .booking-card-head, .res-page-tabs, .cal-modal-header) {
  border-bottom: 1px solid var(--ui-border);
}

/* Forms ------------------------------------------------------------------ */
.ui-input,
.ui-select,
.ui-textarea,
:where(.ms-field-input, .pg-input, .booking-input, .app-modal-input, .res-search-input, .inbox-search-input, .inbox-compose-input, .adm-date-input, .cal-modal-input, .cal-msg-textarea, .reservation-billing-cell input, .reservation-billing-cell select, .book-field input, .book-field select, .book-field textarea, .html-tool-field input[type="text"], .html-tool-field input[type="url"]) {
  background: var(--ui-bg-control) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  font-family: inherit;
  font-size: var(--ui-font-md);
  min-height: 40px;
  outline: none;
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
:where(.ms-field-input, .pg-input, .booking-input, .app-modal-input, .res-search-input, .inbox-search-input, .inbox-compose-input, .adm-date-input, .cal-modal-input, .cal-msg-textarea, .reservation-billing-cell input, .reservation-billing-cell select, .book-field input, .book-field select, .book-field textarea, .html-tool-field input[type="text"], .html-tool-field input[type="url"]):focus {
  border-color: var(--ui-color-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

.ui-textarea,
:where(textarea.ms-field-input, textarea.pg-input, .book-field textarea) {
  line-height: 1.45;
  resize: vertical;
}

.ui-select {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  position: relative;
  width: 100%;
}

.ui-select__native {
  border: 0 !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
}

.ui-select__trigger {
  align-items: center;
  background: var(--ui-bg-control);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: var(--ui-font-md);
  gap: var(--ui-space-2);
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  text-align: left;
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
  width: 100%;
}

.ui-select__trigger:focus-visible {
  border-color: var(--ui-color-primary);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: 0;
}

.ui-select__trigger:disabled {
  cursor: not-allowed;
  opacity: .64;
}

.ui-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select__chevron {
  color: var(--ui-text-muted);
  font-size: 12px;
  transition: transform var(--ui-transition);
}

.ui-select--open .ui-select__chevron {
  transform: rotate(180deg);
}

.ui-select__menu {
  background: var(--ui-bg-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-pop);
  left: 0;
  max-height: min(280px, 50vh);
  overflow: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1200;
}

.ui-select__option,
.ui-select__action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

.ui-select__option:hover,
.ui-select__option:focus-visible,
.ui-select__action:hover,
.ui-select__action:focus-visible {
  background: var(--ui-bg-muted);
  outline: 0;
}

.ui-select__option--selected {
  background: rgba(251, 106, 42, .12);
  color: var(--ui-color-primary);
  font-weight: 750;
}

.ui-select__option--disabled {
  cursor: not-allowed;
  opacity: .48;
}

.ui-select__action {
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  color: var(--ui-color-primary);
  font-weight: 750;
  margin-bottom: 4px;
}

[data-theme="dark"] .ui-select__option--selected {
  background: rgba(251, 106, 42, .22);
}

/* Modals ----------------------------------------------------------------- */
.ui-modal-backdrop,
:where(.cal-modal-backdrop, .app-modal-backdrop, .calendar-note-modal-backdrop, .guest-action-modal, .cal-modal-overlay) {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ui-modal,
:where(.app-modal, .cal-modal, .calendar-note-modal, .property-photo-modal, .guest-action-card, .logo-crop-card) {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-xl) !important;
  box-shadow: var(--ui-shadow-pop) !important;
}

.ui-modal-actions,
:where(.app-modal-actions, .cal-modal-actions, .calendar-note-modal-actions, .property-photo-modal .app-modal-actions) {
  display: flex;
  gap: var(--ui-space-2);
  justify-content: flex-end;
}

/* Menus ------------------------------------------------------------------ */
.ui-menu,
:where(.property-sort-menu, .filter-menu, .automation-multiselect-menu, .cl-filter-menu, .dashboard-property-sort-menu) {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-pop) !important;
}

.ui-menu-item,
:where(.property-sort-option, .property-sort-row, .calendar-filter-check, .prop-group-filter-option, .reservation-filter-option, .cl-filter-menu .filter-option) {
  border-radius: var(--ui-radius-sm);
  transition: background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);
}

.ui-menu-item:hover,
:where(.property-sort-option, .property-sort-row, .calendar-filter-check, .prop-group-filter-option, .reservation-filter-option, .cl-filter-menu .filter-option):hover {
  background: var(--ui-bg-muted);
}

/* Tabs ------------------------------------------------------------------- */
.ui-tabs,
:where(.page-split-tabs, .property-tabs, .cleaning-tabs, .automation-language-tabs, .calendar-view-tabs, .reservation-view-toggle, .cdv-tabs, .guest-client-tabs) {
  background: var(--ui-bg-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
}

.ui-tab,
:where(.property-tab, .property-detail-subtab, .cleaning-tabs button, .automation-language-tabs button, .calendar-view-tabs button, .reservation-view-toggle button, .cdv-tab, .guest-client-tabs button) {
  border-radius: var(--ui-radius-sm);
}

/* Tables ----------------------------------------------------------------- */
.ui-table,
:where(.reservation-list-view, .reservation-billing-table, .invoice-sheet .inv-table) {
  background: var(--ui-bg-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-sm);
}

.ui-table-row,
:where(.reservation-list-row, .reservation-billing-row) {
  border-color: var(--ui-border);
}

/* Badges, alerts, empty states ------------------------------------------ */
.ui-badge,
:where(.sb-badge, .account-badge, .cmd-req-badge, .adm-badge-assigned, .adm-badge-urgency, .booking-site-card-badge, .cal-modal-status-badge) {
  border-radius: 999px;
  font-weight: 800;
}

.ui-alert,
:where(.cleaning-report-alert, .form-message, .reservation-billing-warning) {
  border-radius: var(--ui-radius-md);
}

.ui-empty-state,
:where(.empty-state, .page-split-empty, .book-empty, .ism-empty, .guest-empty-pane, .cal-msg-empty, .cleaning-report-list-empty, .property-map-empty, .prop-picker-empty) {
  color: var(--ui-text-muted);
}

/* Utilities -------------------------------------------------------------- */
.ui-scrollbar,
* {
  scrollbar-color: rgba(118,118,126,0.35) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(118,118,126,0.28);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(118,118,126,0.46);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ─── Logo de marque Hostome (sidebar + écrans d'authentification) ─────────
   Commutation selon le thème applicatif (data-theme), source de vérité.
   Variante « on-light » sur fond clair, « on-dark » sur fond sombre.
   En sidebar repliée, l'icône carrée remplace le logo horizontal.
   Ne jamais modifier app.css : ces règles vivent ici (styles globaux). */
.sb-brand .hl-logo,
.r-brand .hl-logo { display: none; width: auto; }
.sb-brand .hl-logo { height: 30px; }
.r-brand .hl-logo { height: 36px; }
.sb-brand .hl-logo--light,
.r-brand .hl-logo--light { display: block; }
[data-theme="dark"] .sb-brand .hl-logo--light,
[data-theme="dark"] .r-brand .hl-logo--light { display: none; }
[data-theme="dark"] .sb-brand .hl-logo--dark,
[data-theme="dark"] .r-brand .hl-logo--dark { display: block; }
.sb-brand .hl-logo--icon { width: 30px; height: 30px; }
body.sidebar-collapsed .sb-brand .hl-logo--light,
body.sidebar-collapsed .sb-brand .hl-logo--dark { display: none; }
body.sidebar-collapsed .sb-brand .hl-logo--icon { display: block; }