.login-page-container,
.register-page-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  background: var(--color-bg-secondary);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.login-header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-8);
  text-align: center;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.login-header-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.login-header-brand svg {
  flex-shrink: 0;
}

.login-header-brand h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.login-header .subtitle {
  opacity: 0.9;
  margin: 0;
  font-size: var(--font-size-base);
}

.login-form {
  padding: var(--spacing-8);
}

.form-group {
  margin-bottom: var(--spacing-6);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-base);
}

.form-group input,
.form-group select {
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-group textarea {
  min-height: 90px;
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  resize: vertical;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-bg-primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

/* =========================================================
   FORM ROWS
   ========================================================= */

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-4);
  width: 100%;
}

.form-row .form-group {
  min-width: 0;
  width: 100%;
}

.form-row .form-group input,
.form-row .form-group select,
.form-row .form-group textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* =========================================================
   CHECKBOX
   ========================================================= */

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-weight: var(--font-weight-normal);
  margin-bottom: 0;
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.group-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-weight: var(--font-weight-normal);
  margin-bottom: 0;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.checkbox-text {
  flex: 1;
}

.badge-ad {
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-warning, #f59e0b);
  color: white;
  font-weight: var(--font-weight-medium);
}

.group-badge {
  display: inline-block;
  font-size: 0.8em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-right: 4px;
  margin-bottom: 2px;
  font-weight: var(--font-weight-medium);
}

.badge-local {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary-dark, #1e40af);
}

/* =========================================================
   MULTI-SELECT
   ========================================================= */

.multiselect {
  position: relative;
  width: 100%;
}

.multiselect-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  min-height: 42px;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-primary, #fff);
  border: 1px solid var(--color-border-medium, #d1d5db);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.multiselect-control:hover {
  border-color: var(--color-border-dark, #9ca3af);
}

.multiselect-control:focus-within,
.multiselect-dropdown--open + .multiselect-control {
  border-color: var(--color-border-focus, #2563eb);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.15));
}

.multiselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 0;
}

.multiselect-placeholder {
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.9em;
}

.multiselect-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 2px var(--spacing-2);
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary-dark, #1e40af);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.85em;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
}

.multiselect-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary-dark, #1e40af);
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  transition: background 0.15s;
}

.multiselect-tag-remove:hover {
  background: var(--color-primary, #2563eb);
  color: var(--color-text-inverse, #fff);
}

.multiselect-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted, #9ca3af);
  transition: transform 0.2s;
}

.multiselect-dropdown--open .multiselect-chevron {
  transform: rotate(180deg);
}

.multiselect-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: var(--spacing-1);
  background: var(--color-bg-primary, #fff);
  border: 1px solid var(--color-border-medium, #d1d5db);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 250px;
  overflow: hidden;
}

.multiselect-dropdown--open {
  display: block;
}

.multiselect-search {
  padding: var(--spacing-2);
  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
}

.multiselect-search-input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border-medium, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9em;
  background: var(--color-bg-primary, #fff);
  color: var(--color-text-primary, #111827);
  outline: none;
}

.multiselect-search-input:focus {
  border-color: var(--color-border-focus, #2563eb);
}

.multiselect-options {
  overflow-y: auto;
  max-height: 200px;
  padding: var(--spacing-1, 4px) 0;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.9em;
}

.multiselect-option:hover {
  background: var(--color-bg-secondary, #f9fafb);
}

.multiselect-option--selected {
  background: var(--color-primary-light, #dbeafe);
}

.multiselect-option--selected:hover {
  background: var(--color-primary-light, #dbeafe);
}

.multiselect-option-check {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border-medium, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.75em;
  color: var(--color-primary, #2563eb);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.multiselect-option--selected .multiselect-option-check {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-primary, #2563eb);
  color: var(--color-text-inverse, #fff);
}

.multiselect-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  height: var(--button-height);
  padding: 0 var(--spacing-6);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-border-light);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-primary-light);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-hover);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  height: var(--button-height-sm);
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  height: var(--button-height-lg);
  padding: 0 var(--spacing-8);
  font-size: var(--font-size-base);
}

.btn-loading {
  display: none;
}

.btn.loading .btn-text {
  display: none;
}

.btn.loading .btn-loading {
  display: flex;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   TABS
   ========================================================= */

.buildings-tabs {
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-2);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height-sm);
  padding: 0 var(--spacing-4);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-base);
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  margin-bottom: -1px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.tab-button:hover:not(:disabled):not(.tab-button--active) {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

.tab-button--active:hover:not(:disabled) {
  background: var(--color-primary-light);
}

.tab-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.tab-button--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-primary-light);
  font-weight: var(--font-weight-semibold);
}

.tab-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================
   LOGIN / REGISTER
   ========================================================= */

.login-footer,
.register-link {
  text-align: center;
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--spacing-2);
}

.login-footer a,
.register-link a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.login-footer a:hover,
.register-link a:hover {
  text-decoration: underline;
}

/* =========================================================
   MESSAGES
   ========================================================= */

.error-message {
  display: none;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  margin-bottom: var(--spacing-4);
}

.error-message:not(.hidden) {
  display: block;
  animation: slideIn 0.2s ease;
}

.success-message {
  display: none;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-success-light);
  border: 1px solid var(--color-success);
  color: var(--color-success);
  margin-bottom: var(--spacing-4);
}

.success-message:not(.hidden) {
  display: block;
  animation: slideIn 0.2s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ad-notice {
  display: none;
  text-align: center;
  margin-top: var(--spacing-4);
  padding: var(--spacing-3);
  background: var(--color-info-light);
  border-radius: var(--radius-md);
  color: var(--color-info);
  font-size: var(--font-size-sm);
}

.ad-notice:not(.hidden) {
  display: block;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: none;
  margin: auto;
}

.modal:not(.hidden),
.modal.open {
  display: flex;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal-backdrop);
  background: var(--color-overlay);
  animation: fadeIn var(--transition-normal);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.modal-content {
  position: relative;
  width: min(680px, 90%);
  max-height: 90vh;
  max-height: min(90dvh, 90vh);
  margin: auto;
  background: var(--color-modal-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: slideUp var(--transition-normal);
  display: flex;
  flex-direction: column;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.modal-header h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.modal-body {
  padding: var(--spacing-6);
  overflow-y: auto;
  flex: 1;
}

.modal-form {
  width: 100%;
  margin-bottom: var(--spacing-6);
}

.modal-form h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-4);
  color: var(--color-text-primary);
}

/* =========================================================
   USER FORM
   ========================================================= */

.user-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.user-form .modal-form {
  width: 100%;
  margin-bottom: 0;
}

.user-form > .modal-form > .form-group:last-child {
  margin-bottom: 0;
}

.user-form .form-row {
  width: 100%;
  margin-bottom: var(--spacing-5);
}

.user-form .form-row:last-child {
  margin-bottom: 0;
}

.user-form .form-group {
  margin-bottom: var(--spacing-5);
}

.user-form .form-row .form-group {
  margin-bottom: 0;
}

.user-form .form-group input,
.user-form .form-group select,
.user-form .form-group textarea {
  display: block;
}

/* Rôle pleine largeur lorsqu'il est directement dans le formulaire */
.user-form .modal-form > .form-group:has(#role) {
  width: 100%;
}

/* =========================================================
   TABLE
   ========================================================= */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.users-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.users-table th,
.users-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.users-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  user-select: none;
}

.users-table th[data-sort] {
  cursor: pointer;
}

.users-table th[data-sort]:hover {
  background: var(--color-bg-tertiary);
}

.th-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.sort-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.sort-icon--active {
  color: var(--color-primary);
}

.users-table tr:hover {
  background: var(--color-bg-secondary);
}

.users-table tr:last-child td {
  border-bottom: none;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.user-info .username {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.user-info .fullname {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.admin-indicator {
  display: inline-flex;
  align-items: center;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.role-badge.admin {
  background: var(--color-warning-light);
  color: var(--color-warning-hover);
}

.role-badge.user {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.role-badge.small {
  padding: var(--spacing-0) var(--spacing-2);
  font-size: var(--font-size-xs);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.status-badge.active {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-badge.inactive {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.asset-status {
  gap: var(--spacing-2);
}

.asset-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.asset-status.online {
  background: var(--color-success-light);
  color: var(--color-success);
}

.asset-status.offline {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.asset-status.degraded {
  background: var(--color-warning-light);
  color: var(--color-warning-hover);
}

.asset-status.unknown,
.asset-status.maintenance {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.source-badge {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: capitalize;
}

.source-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: var(--spacing-2);
  vertical-align: middle;
}

.source-badge[data-source="ad"]::before {
  background: var(--color-primary);
}

.source-badge[data-source="local"]::before {
  background: var(--color-success);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-1);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  color: var(--color-text-secondary);
}

.action-btn:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.action-btn.delete:hover:not(:disabled) {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* =========================================================
   TABLE STATES
   ========================================================= */

.table-loading,
.table-error,
.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  gap: var(--spacing-4);
  text-align: center;
  color: var(--color-text-tertiary);
}

.table-error svg {
  color: var(--color-danger);
}

.table-error h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.table-error p {
  margin: 0;
  max-width: 400px;
}

.table-empty svg {
  color: var(--color-gray-300);
}

.table-empty p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* =========================================================
   PAGINATION
   ========================================================= */

.users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pagination-controls {
  display: flex;
  gap: var(--spacing-2);
}

/* =========================================================
   ROLES
   ========================================================= */

.roles-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  max-height: 200px;
  overflow-y: auto;
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.assigned-role,
.available-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.assigned-role .role-badge {
  flex-shrink: 0;
}

.available-role button {
  flex-shrink: 0;
}

/* =========================================================
   AD STATUS
   ========================================================= */

.ad-status {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
}

.ad-status--warning {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
}

.ad-status--info {
  background: var(--color-info-light);
  border: 1px solid var(--color-info);
}

.ad-status svg {
  flex-shrink: 0;
  color: inherit;
}

.ad-status strong {
  display: block;
  margin-bottom: var(--spacing-1);
  color: var(--color-text-primary);
}

.ad-status p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.ad-status-hint {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* =========================================================
   FORM HELPERS
   ========================================================= */

.required {
  color: var(--color-danger);
}

.form-hint {
  display: block;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error {
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-border-light);
}

.form-actions .btn {
  flex: 0 0 auto;
}

/* Ligne de test SMTP : séparée par un filet au-dessus des actions */
.form-row--test {
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-light);
}

.form-row__action {
  display: flex;
  align-items: flex-end;
}

/* Utilitaires de texte (classes employées dans les pages Paramètres) */
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }

/* =========================================================
   TOGGLE
   ========================================================= */

.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--color-border-medium);
  border-radius: var(--radius-full);
  transition: background var(--transition-normal);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* =========================================================
   AD TEST
   ========================================================= */

.ad-test-result {
  display: none;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  animation: slideIn var(--transition-fast);
}

.ad-test-result:not(.hidden) {
  display: block;
}

.ad-test-result.success {
  background: var(--color-success-light);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.ad-test-result.error {
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.ad-test-result pre {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.module-placeholder {
  padding: var(--spacing-6);
}

/* =========================================================
   ADMINISTRATION
   ========================================================= */

.administration-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.administration-header {
  padding: var(--spacing-6);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.administration-title {
  margin: 0 0 var(--spacing-1);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.administration-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.admin-tabs {
  display: flex;
  gap: var(--spacing-1);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2);
  overflow-x: auto;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-5);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.admin-tab:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.admin-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.admin-tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-white);
}

.admin-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-tab.hidden {
  display: none;
}

.admin-tab-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
}

.admin-tab-panel--active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  animation: fadeIn var(--transition-fast);
}

.admin-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: var(--spacing-8);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
}

/* =========================================================
   USERS PAGE
   ========================================================= */

.users-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.users-title-area {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.users-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.users-count {
  margin: 0;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.users-toolbar {
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.user-filters {
  width: 100%;
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 180px;
  flex: 1;
}

.filter-group.filter-search {
  flex: 2;
  min-width: 280px;
}

.filter-group.filter-actions {
  flex: 0 0 auto;
}

.filter-input,
.filter-select {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: var(--spacing-3);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-input-wrapper .filter-input {
  padding-left: calc(
    var(--spacing-4) + 18px + var(--spacing-2)
  );
}

.search-clear {
  position: absolute;
  right: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-clear:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.filter-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-3) center;
  padding-right: var(--spacing-10);
}

/* =========================================================
   RESPONSIVE — LOGIN / REGISTER
   ========================================================= */

@media (max-width: 480px) {
  .login-page-container,
  .register-page-container {
    padding: var(--spacing-3);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    padding-top: var(--spacing-10);
  }

  .login-card {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .login-header {
    padding: var(--spacing-5) var(--spacing-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .login-header-brand {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    justify-content: center;
  }

  .login-header-brand svg {
    width: 36px;
    height: 36px;
  }

  .login-header-brand h1 {
    font-size: var(--font-size-xl);
  }

  .login-header .subtitle {
    font-size: var(--font-size-sm);
  }

  .login-form {
    padding: var(--spacing-5) var(--spacing-4);
  }

  .login-footer,
  .register-link {
    padding-top: var(--spacing-4);
  }

  .btn-lg {
    height: var(--button-height);
    padding: 0 var(--spacing-6);
    font-size: var(--font-size-sm);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1023px) {
  .user-form .form-row {
    grid-template-columns: 1fr;
  }

  .filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
    min-width: 0;
  }

  .users-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .users-title-area {
    width: 100%;
  }

  .users-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal-content {
    width: 95%;
    margin: var(--spacing-4);
    max-height: calc(100vh - 2rem);
  }
}

@media (max-width: 767px) {
  .administration-header {
    padding: var(--spacing-4);
  }

  .administration-title {
    font-size: var(--font-size-xl);
  }

  .admin-tabs {
    padding: var(--spacing-1);
  }

  .admin-tab {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-xs);
  }

  .users-header {
    padding: var(--spacing-4);
  }

  .users-toolbar {
    padding: var(--spacing-3);
  }

  .filter-input,
  .filter-select {
    font-size: var(--font-size-base);
  }

  .users-table {
    font-size: var(--font-size-xs);
  }

  .users-table th,
  .users-table td {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .action-btn {
    width: 28px;
    height: 28px;
  }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }

  .toast-container {
    left: var(--spacing-4);
    right: var(--spacing-4);
    bottom: var(--spacing-4);
  }

  .toast {
    max-width: none;
  }
}

@media (max-width: 639px) {
  .administration-header {
    padding: var(--spacing-3);
  }

  .users-header {
    padding: var(--spacing-3);
  }

  .users-toolbar {
    padding: var(--spacing-2);
  }

  .modal-content {
    width: 100%;
    margin: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-body {
    padding: var(--spacing-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-content,
  .toast,
  .admin-tab,
  .action-btn,
  .filter-input,
  .filter-select {
    transition: none !important;
    animation: none !important;
  }
}

/* Harmonisation finale des pieds de tableaux legacy avec users-pagination. */
:where(.pagination, .users-pagination) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  background: var(--color-bg-primary);
}
:where(.pagination, .users-pagination) :where(.pagination-controls) { display: flex; gap: var(--spacing-2); }

/* =========================================================
   ACTIVE DIRECTORY PAGE
   ========================================================= */

.ad-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.ad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--spacing-12);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  text-align: center;
  gap: var(--spacing-4);
  color: var(--color-text-tertiary);
}

.ad-empty h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
}

.ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.ad-title-area {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.ad-title-area h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.ad-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.ad-actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.ad-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-6);
}

.ad-sidebar {
  flex-shrink: 0;
}

.ad-config-list {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.ad-config-list h3 {
  margin: 0;
  padding: var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.ad-config-list ul {
  list-style: none;
  margin: 0;
  padding: var(--spacing-2);
}

.ad-config-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ad-config-list li:hover {
  background: var(--color-bg-tertiary);
}

.ad-config-list li.active {
  background: var(--color-primary-light);
}

.ad-config-list .config-name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-config-list li.active .config-name {
  color: var(--color-primary-dark);
}

.ad-main {
  min-width: 0;
}

.ad-tabs {
  display: flex;
  gap: var(--spacing-1);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  overflow-x: auto;
}

.ad-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-5);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ad-tab:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.ad-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ad-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
}

.ad-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ad-tab-panels {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.ad-tab-panel {
  display: none;
  padding: var(--spacing-6);
  animation: fadeIn var(--transition-fast);
}

.ad-tab-panel.active {
  display: block;
}

.ad-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.ad-form fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.ad-form legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: 0 var(--spacing-2);
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-4);
  width: 100%;
}

.form-row .form-group {
  min-width: 0;
  width: 100%;
  margin-bottom: 0;
}

.form-row .form-group label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  width: 100%;
}

.form-row .form-group span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-row .form-group input,
.form-row .form-group select {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
}

.form-row .form-group input[type="checkbox"] {
  width: auto;
  height: auto;
  accent-color: var(--color-primary);
}

.mappings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
}

.mappings-toolbar h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.ad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.ad-table th,
.ad-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.ad-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ad-table tbody tr:hover {
  background: var(--color-bg-secondary);
}

.ad-table .empty {
  text-align: center;
  color: var(--color-text-tertiary);
  padding: var(--spacing-8) !important;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.role-badge.admin {
  background: var(--color-warning-light);
  color: var(--color-warning-hover);
}

.role-badge.user {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.badge-default {
  background: var(--color-info-light);
  color: var(--color-info);
}

.badge-active {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-inactive {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.btn-icon.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.sync-status {
  margin-bottom: var(--spacing-6);
}

.sync-status h3 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.sync-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-4);
}

.sync-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.sync-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sync-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.sync-value.status-success {
  color: var(--color-success);
}

.sync-value.status-failed,
.sync-value.status-failure {
  color: var(--color-danger);
}

.sync-value.status-partial {
  color: var(--color-warning);
}

.sync-value.status-running {
  color: var(--color-primary);
}

.sync-value.status-pending {
  color: var(--color-text-tertiary);
}

.sync-actions {
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-6);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  text-align: center;
}

.sync-actions .btn-lg {
  min-width: 280px;
}

.sync-actions .text-muted {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.sync-recent {
  margin-top: var(--spacing-6);
}

.sync-recent h3 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

@media (max-width: 1023px) {
  .ad-content {
    grid-template-columns: 1fr;
  }

  .ad-sidebar {
    order: 2;
  }

  .ad-main {
    order: 1;
  }

  .ad-config-list {
    max-height: 200px;
    overflow-y: auto;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Active Directory: page de gestion et contenus de modals */
.ad-management-page {
  gap: var(--spacing-5);
}

.ad-management-header,
.ad-empty-state,
.ad-config-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.ad-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--color-surface-raised), var(--color-primary-light));
  box-shadow: var(--shadow-sm);
}

.ad-management-header h2,
.ad-empty-state h3,
.ad-config-card h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.ad-management-header p,
.ad-empty-state p {
  margin: var(--spacing-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.ad-management-notice,
.ad-modal-feedback {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.ad-management-notice.success {
  color: var(--color-success);
  background: var(--color-success-light);
}

.ad-management-notice.error,
.ad-modal-feedback.error {
  color: var(--color-danger);
  background: var(--color-danger-light);
}

.ad-modal-feedback:empty {
  display: none;
}

.ad-modal-feedback.is-loading {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.ad-config-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-4);
}

.ad-empty-state {
  grid-column: 1 / -1;
  padding: var(--spacing-10);
  text-align: center;
}

.ad-load-state {
  color: var(--color-text-secondary);
}

.ad-load-error {
  color: var(--color-danger);
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}

.ad-empty-state .btn {
  margin-top: var(--spacing-4);
}

.ad-config-card {
  padding: var(--spacing-5);
}

.ad-config-card__heading,
.ad-config-card__heading > div,
.ad-config-card__actions,
.ad-modal-toolbar {
  display: flex;
  align-items: center;
}

.ad-config-card__heading {
  justify-content: space-between;
  gap: var(--spacing-3);
}

.ad-config-card__heading > div,
.ad-config-card__actions {
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.ad-config-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
  margin: var(--spacing-5) 0;
  color: var(--color-text-secondary);
}

.ad-config-summary div {
  min-width: 0;
}

.ad-config-summary dt {
  margin-bottom: var(--spacing-1);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-config-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.ad-config-card__actions {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--spacing-4);
}

.ad-modal .ad-modal-content {
  width: min(900px, 94vw);
}

.ad-modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.ad-modal-form fieldset {
  margin: 0;
  padding: var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.ad-modal-form legend {
  padding: 0 var(--spacing-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.ad-modal-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.ad-modal-form input,
.ad-modal-form select {
  box-sizing: border-box;
  width: 100%;
}

.ad-modal-form .ad-check {
  flex-direction: row;
  align-items: center;
  padding-top: 1.8rem;
}

.ad-modal-form fieldset .ad-check {
  padding-top: 0;
}

.ad-modal-form .ad-check input {
  width: auto;
}

.ad-modal-toolbar {
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.ad-modal-toolbar p {
  margin: 0;
  color: var(--color-text-secondary);
}

.ad-modal-table-wrap {
  overflow-x: auto;
}

.ad-modal-table-wrap small,
.ad-modal-table-wrap details {
  display: block;
  margin-top: var(--spacing-1);
  color: var(--color-text-secondary);
}

.ad-test-state,
.ad-sync-result {
  padding: var(--spacing-4);
  margin-top: var(--spacing-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.ad-test-state.success,
.ad-sync-result.success {
  color: var(--color-success);
  background: var(--color-success-light);
}

.ad-test-state.error {
  color: var(--color-danger);
  background: var(--color-danger-light);
}

.ad-test-state p {
  margin: var(--spacing-2) 0 0;
}

.ad-test-state pre {
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ad-sync-result dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
  margin: var(--spacing-4) 0 0;
}

.ad-sync-result dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.ad-sync-result dd {
  margin: var(--spacing-1) 0 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.ad-links-section {
  margin-top: var(--spacing-6);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.ad-links-header {
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.ad-links-header h2 {
  margin: 0 0 var(--spacing-1);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.ad-links-header p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.ad-links-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}

.ad-links-column h3 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ad-link-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.ad-link-row:last-child {
  border-bottom: none;
}

.ad-link-row__name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.ad-link-row__select {
  max-width: 320px;
}

.ad-links-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

@media (max-width: 767px) {
  .ad-links-columns {
    grid-template-columns: 1fr;
  }

  .ad-link-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ad-link-row__select {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .ad-management-header,
  .ad-modal-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ad-management-header .btn,
  .ad-modal-toolbar .btn,
  .ad-config-card__actions .btn {
    width: 100%;
  }

  .ad-config-summary,
  .ad-sync-result dl {
    grid-template-columns: 1fr;
  }

  .ad-modal .ad-modal-content {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .ad-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ad-actions {
    width: 100%;
    justify-content: stretch;
  }

  .ad-actions .btn {
    flex: 1;
  }

  .ad-tabs {
    flex-wrap: wrap;
  }

  .ad-tab {
    flex: 1;
    text-align: center;
    min-width: 0;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  .ad-tab-panel {
    padding: var(--spacing-4);
  }

  .ad-form fieldset {
    padding: var(--spacing-4);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

.module-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.module-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--bg-secondary, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  font-size: 0.85em;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
}

.module-filter-btn:hover {
  background: var(--bg-tertiary, #e5e7eb);
  color: var(--color-text-primary, #111827);
}

.module-filter-btn.active {
  background: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
  color: white;
}

.module-filter-btn .permission-count {
  font-size: 0.9em;
  opacity: 0.8;
}

.module-filter-btn.active .permission-count {
  opacity: 1;
}

.permission-module {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
  overflow: hidden;
}

.permission-module-header {
  background: var(--color-bg-secondary);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border-light);
  font-weight: var(--font-weight-semibold);
}

.permission-module-header label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  margin-bottom: 0;
}

.permission-module-header input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.permission-count {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
}

.permission-module-items {
  padding: var(--spacing-3) var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.permission-item {
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}

.permission-item:hover {
  background: var(--color-bg-secondary);
}

.permission-item label {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  cursor: pointer;
  margin-bottom: 0;
  width: 100%;
}

.permission-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.permission-code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: var(--color-bg-primary);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

.permission-name {
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.permission-entry-badge {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 0 var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* =========================================================
   FORM INPUT & SELECT (used by page-filters, toolbar)
   ========================================================= */

.form-input,
.form-select {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

/* =========================================================
   EQUIPMENT PAGE
   ========================================================= */

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.page-header-left {
  min-width: 0;
}

.page-header-left h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.page-subtitle {
  margin: var(--spacing-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.page-header-right {
  flex-shrink: 0;
}

.page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.page-filters .filter-group {
  flex: 1 1 180px;
  min-width: 0;
}

.page-filters .filter-group select,
.page-filters .filter-group input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
}

.page-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-light);
}

/* Equipment modal: location selects grid */
.modal .form-row h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.modal .form-row label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  width: 100%;
}

.modal .form-row label span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.modal .form-row input,
.modal .form-row select,
.modal .form-row textarea {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
}

.modal .form-row textarea {
  height: auto;
  padding: var(--spacing-3) var(--spacing-4);
  resize: vertical;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--color-border-light);
}

.modal-body label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  width: 100%;
}

.modal-body label span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.modal-body label input,
.modal-body label select,
.modal-body label textarea {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
}

.modal-body label textarea {
  height: auto;
  padding: var(--spacing-3) var(--spacing-4);
  resize: vertical;
}

@media (max-width: 1023px) {
  .page-content {
    gap: var(--spacing-4);
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-right {
    align-self: flex-start;
  }

  .page-filters {
    flex-direction: column;
  }

  .page-filters .filter-group {
    flex: 1 1 auto;
  }
}

@media (max-width: 767px) {
  .page-header-left h1 {
    font-size: var(--font-size-xl);
  }

  .page-filters .filter-group select,
  .page-filters .filter-group input {
    font-size: var(--font-size-base);
  }

  .modal .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .page-header-left h1 {
    font-size: var(--font-size-lg);
  }

  .page-filters {
    gap: var(--spacing-2);
  }

  .pagination {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .pagination .btn {
    width: 100%;
  }

  .modal-footer {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* ============================================================
   AI ASSISTANT PAGE
   ============================================================ */

.ai-layout {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.ai-sidebar {
  width: 280px;
  border-right: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
}

.ai-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-sidebar-header h3 {
  margin: 0;
  font-size: var(--font-size-sm);
}

.ai-conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-2);
}

.conversation-item {
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: var(--spacing-1);
  transition: background-color 0.15s;
}

.conversation-item:hover {
  background: var(--color-bg-tertiary);
}

.conversation-item--active {
  background: var(--primary-bg);
  border-left: 3px solid var(--primary-color);
}

.conversation-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.ai-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.ai-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-secondary);
}

.ai-welcome-icon {
  margin-bottom: var(--spacing-4);
  color: var(--primary-color);
  opacity: 0.6;
}

.ai-welcome h3 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

.ai-welcome p {
  max-width: 400px;
  margin: 0 0 var(--spacing-6);
}

.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  justify-content: center;
}

.ai-suggestion-btn {
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.ai-suggestion-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-bg);
}

.ai-message {
  display: flex;
  gap: var(--spacing-3);
  max-width: 80%;
}

.ai-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--color-bg-secondary);
}

.ai-message--user .ai-message-avatar {
  background: var(--primary-bg);
}

.ai-message-content {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.ai-message--user .ai-message-content {
  background: var(--primary-color);
  color: white;
}

.ai-message-text {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

.ai-message-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-1);
}

.ai-message--user .ai-message-time {
  color: rgba(255,255,255,0.7);
}

.ai-message-model {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

.ai-input-area {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-end;
  flex-shrink: 0;
  z-index: 10;
}

.ai-input {
  flex: 1;
  padding: var(--spacing-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  resize: none;
  min-height: 44px;
  max-height: 120px;
}

.ai-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Calendar styles */
.calendar-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.calendar-nav h2 {
  margin: 0;
  min-width: 200px;
  text-align: center;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
  border: 1px solid var(--color-border-light);
  padding: var(--spacing-2);
  vertical-align: top;
}

.calendar-table th {
  background: var(--color-bg-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.calendar-cell {
  height: 100px;
  position: relative;
}

.calendar-cell--empty {
  background: var(--color-bg-secondary);
  opacity: 0.5;
}

.calendar-cell--today {
  background: var(--primary-bg);
}

.calendar-day {
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
}

.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-event {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--color-bg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status row for dashboard */
.status-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.status-row:last-child {
  border-bottom: none;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.status-count {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.empty-message {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--spacing-4);
  text-align: center;
}

.overdue-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: #fef2f2;
  color: #dc2626;
  font-weight: 600;
  font-size: var(--font-size-xs);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.detail-item label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.detail-item span {
  font-size: var(--font-size-sm);
}

.detail-section {
  margin-top: var(--spacing-4);
}

.detail-section label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--spacing-2);
}

.data-table.compact {
  font-size: var(--font-size-sm);
}

.data-table.compact td,
.data-table.compact th {
  padding: var(--spacing-2) var(--spacing-3);
}

.refs-section {
  margin-bottom: var(--spacing-6);
}

.refs-section h3 {
  margin-bottom: var(--spacing-2);
}

.section-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-4);
}

.section-desc a {
  color: var(--primary-color);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.stat-card {
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-1);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.dashboard-card {
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.dashboard-card h3 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-sm);
}

.dashboard-section {
  margin-bottom: var(--spacing-6);
}

.dashboard-section h3 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-base);
}

.btn-sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
}

@media (max-width: 768px) {
  .ai-layout {
    flex-direction: column;
  }

  .ai-sidebar {
    width: 100%;
    height: auto;
    max-height: 300px;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
  }

  .ai-sidebar-header {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .ai-conversations-list {
    max-height: 250px;
  }

  .conversation-item {
    padding: var(--spacing-3) var(--spacing-4);
    min-height: 44px;
  }

  .ai-message {
    max-width: 95%;
  }

  .ai-header {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .ai-header-top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }

  .ai-header h2 {
    font-size: var(--font-size-lg);
  }

  .ai-mode-switch {
    width: 100%;
    justify-content: center;
  }

  .ai-mode-btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
  }

  .ai-model-badge {
    max-width: 100%;
    text-align: center;
    margin-top: var(--spacing-2);
  }

  .ai-selectors {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .ai-selector-group {
    width: 100%;
  }

  .ai-selector {
    height: 44px;
    font-size: var(--font-size-base);
  }

  .ai-current-usage-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
  }

  .ai-current-usage-label {
    min-width: auto;
  }

  .ai-current-usage-value {
    width: 100%;
    text-align: left;
  }

  .ai-selectors-content {
    max-height: 250px;
  }

  .ai-selector {
    height: 44px;
    font-size: 16px;
  }

  .ai-main {
    flex: 1;
    min-height: 0;
  }

  .ai-messages {
    padding: var(--spacing-4);
    gap: var(--spacing-3);
  }

  .ai-message {
    max-width: 90%;
  }

  .ai-message-content {
    max-width: 100%;
  }

  .ai-message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .ai-input-area {
    padding: var(--spacing-3) var(--spacing-4);
    gap: var(--spacing-2);
  }

  .ai-input {
    min-height: 44px;
    max-height: 150px;
    font-size: 16px;
    padding: var(--spacing-3);
  }

  .ai-input-area .btn {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-action-buttons {
    width: 100%;
    justify-content: center;
  }

  .ai-action-buttons .btn {
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
  }

  .ai-status {
    padding: var(--spacing-3);
    gap: var(--spacing-2);
  }

  .ai-status-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
  }

  .ai-status-label {
    font-weight: 600;
  }

  .conversation-item {
    padding: var(--spacing-3) var(--spacing-4);
    min-height: 44px;
  }

  .conversation-title {
    font-size: var(--font-size-base);
  }

  .conversation-meta {
    font-size: var(--font-size-xs);
  }

  .ai-actions {
    padding: var(--spacing-2) var(--spacing-4);
  }

  .ai-status {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-current-usage-fallback {
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
  }
}

@media (max-width: 480px) {
  .ai-header {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-selectors {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-messages {
    padding: var(--spacing-3);
  }

  .ai-input-area {
    padding: var(--spacing-2) var(--spacing-3);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2);
  }

  .ai-input {
    width: 100%;
    min-height: 44px;
  }

  .ai-input-area .btn {
    width: 100%;
    min-height: 48px;
  }

  .ai-sidebar {
    max-height: 250px;
  }

  .ai-conversations-list {
    max-height: 200px;
  }

  .ai-selectors {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-selectors-content {
    max-height: 200px;
  }

  .ai-current-usage-header {
    font-size: var(--font-size-xs);
  }

  .ai-current-usage-value {
    font-size: var(--font-size-xs);
  }

  .ai-action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .ai-action-buttons .btn {
    width: 100%;
    min-height: 44px;
  }

  .ai-mode-btn {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
  }
}

/* ============================================================
   DASHBOARD WIDGETS (refonte)
   ============================================================ */

.dashboard-modules {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* ---- Bandeau d'alertes ---- */
.dash-alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-danger-light);
  box-shadow: var(--shadow-sm);
}

.dash-alerts-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger);
}

.dash-alerts-badge {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.dash-alerts-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
}

.dash-alerts-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-alert {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: box-shadow var(--transition-fast, 0.15s ease), transform 0.15s ease;
}

.dash-alert:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dash-alert--danger { border-color: var(--color-danger); color: var(--color-danger); }
.dash-alert--warning { border-color: var(--color-warning); color: var(--color-warning-hover); }
.dash-alert--info { border-color: var(--color-info); color: var(--color-info-hover); }

/* ---- Ligne d'indicateurs clés (hero) ---- */
.dash-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--spacing-4);
}

.dash-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.dash-hero-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.dash-hero-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.dash-hero-card--primary { border-top-color: var(--color-primary); }
.dash-hero-card--success { border-top-color: var(--color-success); }
.dash-hero-card--warning { border-top-color: var(--color-warning); }
.dash-hero-card--danger { border-top-color: var(--color-danger); }
.dash-hero-card--info { border-top-color: var(--color-info); }

.dash-hero-card--alert {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.dash-hero-card--alert .dash-hero-value {
  color: var(--color-danger);
}

.dash-hero-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.dash-hero-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.dash-hero-card--success .dash-hero-icon { background: var(--color-success-light); color: var(--color-success); }
.dash-hero-card--warning .dash-hero-icon { background: var(--color-warning-light); color: var(--color-warning-hover); }
.dash-hero-card--danger .dash-hero-icon { background: var(--color-danger-light); color: var(--color-danger); }
.dash-hero-card--info .dash-hero-icon { background: var(--color-info-light); color: var(--color-info); }

.dash-hero-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.dash-hero-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-text-primary);
}

.dash-hero-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ---- Barres de progression ---- */
.dash-progress {
  height: 6px;
  margin-top: var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.dash-progress-bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.4s ease;
}

.dash-progress-bar--primary { background: var(--color-primary); }
.dash-progress-bar--success { background: var(--color-success); }
.dash-progress-bar--warning { background: var(--color-warning); }
.dash-progress-bar--danger { background: var(--color-danger); }
.dash-progress-bar--info { background: var(--color-info); }

/* ---- Sections par module ---- */
.dash-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.dash-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid var(--color-border-light);
}

.dash-section-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.dash-section--success .dash-section-icon { background: var(--color-success-light); color: var(--color-success); }
.dash-section--warning .dash-section-icon { background: var(--color-warning-light); color: var(--color-warning-hover); }
.dash-section--danger .dash-section-icon { background: var(--color-danger-light); color: var(--color-danger); }
.dash-section--info .dash-section-icon { background: var(--color-info-light); color: var(--color-info); }

.dash-section-title {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dash-section-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}

.dash-section-link:hover {
  text-decoration: underline;
}

/* ---- Cartes indicateurs ---- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--spacing-4);
}

.dash-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.dash-card[data-link] {
  cursor: pointer;
}

.dash-card[data-link]:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.dash-card[data-link]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.dash-card--alert {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.dash-card--alert .dash-card-value {
  color: var(--color-danger);
}

.dash-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.dash-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.dash-card-icon--success { background: var(--color-success-light); color: var(--color-success); }
.dash-card-icon--warning { background: var(--color-warning-light); color: var(--color-warning-hover); }
.dash-card-icon--danger { background: var(--color-danger-light); color: var(--color-danger); }
.dash-card-icon--info { background: var(--color-info-light); color: var(--color-info); }

.dash-card-flag {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.dash-card-value {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.dash-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dash-card-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.dash-card-link {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}

.dash-card-link:hover {
  text-decoration: underline;
}

/* ---- États ---- */
.dashboard-empty {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: var(--spacing-8);
  border: 1px dashed var(--color-border-medium);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  text-align: center;
}

.dashboard-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--spacing-3);
  border-radius: var(--radius-xl);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 2rem;
}

.dashboard-empty h2 {
  margin: 0 0 var(--spacing-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.dashboard-empty p {
  margin: 0;
  color: var(--color-text-tertiary);
}

.dashboard-loading {
  display: grid;
  place-items: center;
  min-height: 280px;
  gap: var(--spacing-3);
  color: var(--color-text-tertiary);
}

.dashboard-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-primary-light);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 800ms linear infinite;
}

@media (max-width: 1024px) {
  .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 640px) {
  .dash-hero {
    grid-template-columns: 1fr;
  }

  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-hero-value {
    font-size: var(--font-size-2xl);
  }

  .dash-card-value {
    font-size: var(--font-size-xl);
  }
}

/* ============================================================
    PLANNING (Hotel-style)
   ============================================================ */

/* Page planning - fill height */
.page-content:has(.planning-container) {
  height: calc(100vh - var(--header-height));
  min-height: 0;
}

.planning-container {
  position: relative;
  flex: 1;
  min-height: 0;
}

.planning-wrapper {
  overflow: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.planning-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 800px;
  table-layout: fixed;
  --housing-col-width: 120px;
  --day-col-width: 32px;
}

.planning-table th,
.planning-table td {
  border: 1px solid var(--color-border-light);
  padding: 0;
  font-size: var(--font-size-xs);
  text-align: center;
  vertical-align: middle;
}

/* En-tête fixe */
.planning-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.planning-table thead th {
  background: var(--color-bg-secondary);
  border-bottom: 2px solid var(--color-border-medium);
  padding: 6px 4px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Colonne chambre sticky */
.planning-housing-col {
  width: var(--housing-col-width);
  min-width: var(--housing-col-width);
  max-width: var(--housing-col-width);
  text-align: left !important;
  background: var(--color-bg-secondary);
  position: sticky;
  left: 0;
  z-index: 11;
  border-right: 2px solid var(--color-border-medium) !important;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 6px 8px !important;
}

.housing-col-header {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
}

.planning-housing-cell {
  text-align: left !important;
  background: var(--color-bg-primary);
  position: sticky;
  left: 0;
  z-index: 5;
  border-right: 2px solid var(--color-border-medium) !important;
  padding: 6px 8px !important;
  vertical-align: top;
}

.housing-name {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--color-text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.housing-code {
  display: block;
  font-size: 9px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
  margin-top: 1px;
}

.housing-beds {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  margin-top: 1px;
}

.planning-building-row .planning-building-cell {
  background: var(--color-bg-secondary);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 8px !important;
  border-bottom: 1px solid var(--color-border-medium);
  position: sticky;
  left: 0;
  z-index: 4;
}

/* Colonnes jours */
.planning-day-col {
  width: var(--day-col-width);
  min-width: var(--day-col-width);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.2;
  padding: 4px 2px !important;
}

.planning-day-col .day-name {
  display: block;
  color: var(--color-text-tertiary);
  font-size: 9px;
  text-transform: uppercase;
}

.planning-day-col .day-num {
  display: block;
  font-size: 11px;
  color: var(--color-text-primary);
}

/* Weekends */
.planning-weekend {
  background: var(--color-gray-50);
}

.planning-weekend .day-name,
.planning-weekend .day-num {
  color: var(--color-text-muted);
}

/* Aujourd'hui */
.planning-today {
  background: var(--color-primary-light) !important;
}

.planning-today .day-num {
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cellules */
.planning-cell {
  width: var(--day-col-width);
  min-width: var(--day-col-width);
  height: 36px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: background-color 0.1s ease;
  padding: 0 !important;
}

.planning-cell:hover {
  background: var(--color-gray-50);
}

/* Cellule contenant un bloc de réservation */
.planning-cell--block {
  padding: 0 !important;
  overflow: hidden;
}

/* Blocs de réservation continus */
.planning-block {
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  margin: 2px 0;
}

.planning-block:hover {
  opacity: 0.92;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.planning-block-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0 6px;
  overflow: hidden;
}

.planning-block-name {
  flex: 1;
  font-size: 10px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* Status colors - blocs */
.planning-block--pre_reserved {
  background: var(--color-warning);
  border-left: 3px solid var(--color-warning-hover);
}

.planning-block--confirmed {
  background: var(--color-success);
  border-left: 3px solid var(--color-success-hover);
}

.planning-block--in_progress {
  background: var(--color-primary);
  border-left: 3px solid var(--color-primary-hover);
}

.planning-block--completed {
  background: var(--color-success);
  border-left: 3px solid var(--color-success-hover);
}

.planning-block--cancelled {
  background: var(--color-danger);
  border-left: 3px solid var(--color-danger-hover);
  opacity: 0.7;
}

/* Indicateurs visuels blocs */
.planning-block--pre_reserved .planning-block-name::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

.planning-block--confirmed .planning-block-name::before {
  content: "✓";
  font-size: 8px;
  font-weight: bold;
  margin-right: 2px;
  flex-shrink: 0;
}

/* Nettoyage dans bloc */
.planning-block .planning-cleaning-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.planning-block .planning-cleaning-warning {
  color: white;
  font-size: 10px;
  font-weight: bold;
  flex-shrink: 0;
}

/* Sélection & Drag */
.planning-cell--selected {
  background: var(--color-primary-light) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.planning-cell--drag {
  background: var(--color-primary-light) !important;
  outline: 1px dashed var(--color-primary);
}

/* Ligne hover */
.planning-table tbody tr:hover .planning-housing-cell {
  background: var(--color-gray-50);
}

/* Form controls for planning modals */
.planning-container .form-control,
.modal-content .form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  min-height: 40px;
}

@media (max-width: 640px) {
  .planning-container .form-control,
  .modal-content .form-control {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
  }
}

/* ============================================================
   RESPONSIVE - Tablette
   ============================================================ */
@media (max-width: 1024px) {
  .planning-container {
    height: calc(100vh - var(--header-height-mobile) - 160px);
  }

  .planning-table {
    --housing-col-width: 100px;
    --day-col-width: 28px;
  }

  .planning-housing-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    font-size: 10px;
    padding: 4px 6px !important;
  }

  .planning-day-col {
    width: 28px;
    min-width: 28px;
  }

  .planning-cell {
    width: 28px;
    min-width: 28px;
    height: 32px;
  }

  .planning-block {
    height: calc(100% - 4px);
  }

  .planning-block-name {
    font-size: 9px;
  }
}

/* ============================================================
   RESPONSIVE - Mobile (iPhone)
   ============================================================ */
@media (max-width: 640px) {
  .planning-container {
    height: calc(100vh - var(--header-height-mobile) - 140px);
    margin: 0 -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .planning-wrapper {
    border-radius: 0;
    border: none;
  }

  .planning-table {
    min-width: 600px;
    --housing-col-width: 70px;
    --day-col-width: 24px;
  }

  /* Colonne chambre compacte */
  .planning-housing-col {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    font-size: 9px;
    padding: 4px 4px !important;
    z-index: 12;
  }

  .planning-housing-cell {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    padding: 4px 4px !important;
    z-index: 6;
  }

  .housing-name {
    font-size: 9px;
  }

  .housing-code {
    font-size: 7px;
  }

  /* Jours compacts */
  .planning-day-col {
    width: 24px;
    min-width: 24px;
    padding: 3px 1px !important;
  }

  .planning-day-col .day-name {
    font-size: 7px;
  }

  .planning-day-col .day-num {
    font-size: 9px;
  }

  .planning-today .day-num {
    width: 16px;
    height: 16px;
    font-size: 8px;
  }

  /* Cellules tactiles */
  .planning-cell {
    width: 24px;
    min-width: 24px;
    height: 44px;
    min-height: 44px;
  }

  /* Blocs compacts */
  .planning-block {
    height: calc(100% - 4px);
  }

  .planning-block-inner {
    padding: 0 3px;
    gap: 2px;
  }

  .planning-block-name {
    font-size: 8px;
  }

  .planning-block--pre_reserved .planning-block-name::before,
  .planning-block--confirmed .planning-block-name::before {
    display: none;
  }

  .planning-block .planning-cleaning-dot {
    width: 5px;
    height: 5px;
  }

  .planning-block .planning-cleaning-warning {
    font-size: 8px;
  }

  /* Header fixe */
  .planning-table thead {
    z-index: 13;
  }

  .planning-table thead th {
    padding: 4px 2px;
    font-size: 9px;
  }
}

/* ============================================================
   RESPONSIVE - iPhone petit écran
   ============================================================ */
@media (max-width: 375px) {
  .planning-table {
    --housing-col-width: 60px;
    --day-col-width: 22px;
  }

  .planning-housing-col {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
  }

  .planning-housing-cell {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
  }

  .housing-name {
    font-size: 8px;
  }

  .housing-code {
    font-size: 6px;
  }

  .planning-cell {
    width: 22px;
    min-width: 22px;
  }

  .planning-block-name {
    font-size: 7px;
  }
}

.occupant-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.occupant-entry {
  display: flex;
  gap: 4px;
  align-items: center;
}

.occupant-entry .form-control {
  flex: 1;
  min-width: 0;
}

.guest-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.guest-type-toggle .guest-type-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.guest-type-toggle .guest-type-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .reservation-fields-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .reservation-detail-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .reservation-modal-footer {
    flex-direction: column !important;
  }

  .reservation-modal-footer .btn {
    width: 100%;
  }
}

.detail-occupant-row + .detail-occupant-row {
  border-top: 1px solid var(--color-border-light);
}

.btn-group .btn.active {
  background: var(--primary-color, #3b82f6);
  color: white;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
}

.badge-sm {
  padding: 1px 6px;
  font-size: 10px;
}

.checkbox-label {
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
}

/* ============================================================
   HOUSING SPECIFIC
   ============================================================ */

.btn-warning {
  background: #f59e0b;
  color: white;
  border: none;
}

.btn-warning:hover {
  background: #d97706;
}

.btn-success {
  background: #10b981;
  color: white;
  border: none;
}

.btn-success:hover {
  background: #059669;
}

/* ============================================================
   AUDIT PAGE
   ============================================================ */

.audit-id {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.audit-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.audit-ip {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.audit-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.audit-detail-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.audit-detail-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.audit-diff-section {
  margin-top: var(--spacing-5);
}

.audit-diff-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

.audit-json-block {
  background: var(--color-bg-secondary);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--font-size-xs);
  font-family: monospace;
  line-height: 1.5;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--color-border-light);
  white-space: pre-wrap;
  word-break: break-word;
}

.filter-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 140px;
  flex: 1;
}

.filter-group.filter-search {
  flex: 2;
  min-width: 200px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: var(--spacing-3);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.search-input-wrapper .form-input {
  padding-left: var(--spacing-8);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.pagination-ellipsis {
  padding: 0 var(--spacing-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.pagination-page {
  min-width: 32px;
  text-align: center;
}

.audit-row {
  cursor: pointer;
}

.audit-row:hover {
  background: var(--color-bg-secondary);
}

@media (max-width: 767px) {
  .audit-detail-grid {
    grid-template-columns: 1fr;
  }

  .filters-row {
    flex-direction: column;
  }

  .filter-group {
    min-width: 100%;
  }

  .pagination-pages {
    display: none;
  }
}

.form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.form-section:last-child {
  border-bottom: none;
}

.form-section h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.bed-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bed-room-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bed-room-label {
  font-weight: 500;
  min-width: 100px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.modal-lg {
  width: min(960px, calc(100vw - 2rem));
  max-width: 960px;
  margin: auto;
}

.asset-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.asset-info-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-info-modal-overlay .modal-content {
  margin: 0;
  width: min(960px, calc(100vw - 2rem));
  max-height: 90vh;
}

.asset-modal-panel {
  display: none;
}

.asset-modal-panel.active {
  display: block;
}

.asset-modal-panel section + section {
  margin-top: 1.25rem;
}

.asset-modal-panel p {
  margin: 0.45rem 0;
}

.asset-modal-panel small {
  color: var(--color-text-muted);
  margin-left: 0.5rem;
}

.asset-info-modal {
  min-width: 0;
}

.asset-info-modal section {
  padding: 0 0 var(--spacing-5);
  border: 0;
  background: transparent;
}

.asset-info-modal section h3 {
  margin: 0 0 var(--spacing-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.asset-info-modal .asset-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2) var(--spacing-5);
  margin: 0;
}

.asset-info-row {
  min-width: 0;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.asset-modal-panel section + section {
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-border-light);
}

.asset-info-row dt {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.asset-info-row dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.it-asset-form-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.it-monitoring-summary {
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  font-size: var(--font-size-sm);
}

.it-asset-form-modal-overlay > .modal {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.it-asset-form-modal {
  width: min(960px, calc(100vw - 2rem));
  max-height: 90vh;
}

.it-asset-form-modal fieldset {
  margin: 0 0 var(--spacing-5);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.it-asset-form-modal fieldset:last-child { margin-bottom: 0; }
.it-asset-form-modal legend {
  padding: 0 var(--spacing-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 639px) {
  .it-asset-form-modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .it-asset-form-modal .modal-body { padding: var(--spacing-4); }
  .it-asset-form-modal .form-row { grid-template-columns: 1fr; gap: var(--spacing-3); }
  .it-asset-form-modal fieldset { padding: var(--spacing-3); }

  .modal-lg {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
  }

  .asset-modal-tabs {
    gap: 0.25rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: calc(var(--spacing-2) * -1) calc(var(--spacing-2) * -1) var(--spacing-4);
    padding: var(--spacing-2);
  }

  .asset-modal-tabs .admin-tab {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
  }

  .asset-info-modal .asset-info {
    grid-template-columns: 1fr;
  }

  .asset-info-modal section { padding-bottom: var(--spacing-4); }
}

/* Sport dashboard */
.sport-dashboard { max-width: 1440px; }
.sport-dashboard-header { align-items: flex-end; margin-bottom: var(--spacing-6); }
.sport-kicker, .sport-eyebrow { display: block; color: var(--color-primary); font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sport-kicker { margin-bottom: var(--spacing-2); }
.sport-periods { display: flex; gap: var(--spacing-1); flex-wrap: wrap; }
.sport-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-4); }
.sport-stat-card { min-width: 0; padding: var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-bg-primary); box-shadow: var(--shadow-sm); }
.sport-stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.sport-stat-card strong { display: block; margin: var(--spacing-3) 0 var(--spacing-2); color: var(--color-text-primary); font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1; }
.sport-stat-icon, .sport-activity-symbol, .sport-recent-icon { display: grid; place-items: center; border-radius: var(--radius-full); color: var(--color-primary); background: var(--color-primary-light); }
.sport-stat-icon { width: 30px; height: 30px; font-size: 1.1rem; }
.sport-stat-meta { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.sport-stat-meta--muted { color: var(--color-text-muted); }
.sport-change { font-weight: 700; }
.sport-change--up, .is-positive { color: var(--color-success); }
.sport-change--down, .is-negative { color: var(--color-danger); }
.sport-trend-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: var(--spacing-6); overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-border-light); }
.sport-trend-strip > div { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); background: var(--color-bg-secondary); font-size: var(--font-size-sm); }
.sport-trend-strip strong { font-size: var(--font-size-lg); }
.sport-dashboard-grid { display: grid; gap: var(--spacing-4); margin-bottom: var(--spacing-4); }
.sport-health-latest { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sport-dashboard-grid--main { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); }
.sport-dashboard-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sport-card { min-width: 0; overflow: hidden; }
.sport-card--featured { background: linear-gradient(135deg, var(--color-bg-primary), var(--color-primary-light)); }
.sport-card-header { align-items: center; }
.sport-card-header h2, .sport-card h2 { margin-top: var(--spacing-1); }
.sport-metric-select { width: auto; min-width: 120px; height: 32px; padding: var(--spacing-1) var(--spacing-2); font-size: var(--font-size-xs); }
.sport-chart-wrap { min-height: 220px; }
.sport-chart { display: block; width: 100%; height: 220px; overflow: visible; }
.sport-chart-bar { fill: var(--color-primary); opacity: .78; transition: opacity var(--transition-fast); }
.sport-chart-bar:hover { opacity: 1; }
.sport-chart-axis { stroke: var(--color-border-light); stroke-width: 1; }
.sport-chart-labels { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sport-weekly-list { display: grid; gap: var(--spacing-3); padding-top: var(--spacing-2); }
.sport-week-row { display: grid; grid-template-columns: 42px minmax(80px, 1fr) auto; align-items: center; gap: var(--spacing-3); font-size: var(--font-size-xs); }
.sport-week-row strong { color: var(--color-text-primary); font-size: var(--font-size-sm); }
.sport-week-row > span:last-child { grid-column: 2 / -1; margin-top: -8px; color: var(--color-text-tertiary); }
.sport-week-label { color: var(--color-text-secondary); font-weight: 600; }
.sport-week-bar { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-tertiary); }
.sport-week-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.sport-calendar-weekdays, .sport-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sport-calendar-weekdays { margin-bottom: var(--spacing-2); color: var(--color-text-muted); font-size: 10px; text-align: center; }
.sport-calendar-cell { aspect-ratio: 1; border-radius: 3px; background: var(--color-bg-tertiary); }
.sport-calendar-cell.level-1, .sport-calendar-legend .level-1 { background: #bfdbfe; }
.sport-calendar-cell.level-2, .sport-calendar-legend .level-2 { background: #60a5fa; }
.sport-calendar-cell.level-3, .sport-calendar-legend .level-3 { background: #2563eb; }
.sport-calendar-cell.level-4, .sport-calendar-legend .level-4 { background: #1e3a8a; }
.sport-calendar-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: var(--spacing-3); color: var(--color-text-muted); font-size: 10px; }
.sport-calendar-legend i { width: 11px; height: 11px; border-radius: 2px; background: var(--color-bg-tertiary); }
.sport-featured-activity { display: flex; align-items: center; gap: var(--spacing-4); }
.sport-activity-symbol { flex: 0 0 56px; width: 56px; height: 56px; font-size: 1.7rem; }
.sport-featured-title h3 { margin: var(--spacing-1) 0; font-size: var(--font-size-xl); }
.sport-featured-title p { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.sport-activity-metrics { display: flex; flex-wrap: wrap; gap: var(--spacing-6); margin-top: var(--spacing-6); padding-top: var(--spacing-4); border-top: 1px solid var(--color-border-light); }
.sport-activity-metrics span, .sport-health-card span { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.sport-activity-metrics strong { display: block; margin-top: 3px; color: var(--color-text-primary); font-size: var(--font-size-lg); }
.sport-recent-list { padding: 0; }
.sport-recent-item { display: flex; align-items: center; width: 100%; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border: 0; border-bottom: 1px solid var(--color-border-light); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.sport-recent-item:last-child { border-bottom: 0; }
.sport-recent-item:hover { background: var(--color-bg-secondary); }
.sport-recent-icon { flex: 0 0 34px; width: 34px; height: 34px; }
.sport-recent-main { min-width: 0; flex: 1; }
.sport-recent-main strong, .sport-recent-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-recent-main small, .sport-recent-elevation { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.sport-recent-elevation { white-space: nowrap; }
.sport-distribution { display: grid; gap: var(--spacing-4); }
.sport-distribution-row { display: flex; align-items: center; gap: var(--spacing-3); }
.sport-distribution-row > div { min-width: 0; flex: 1; }
.sport-distribution-row strong, .sport-distribution-row small { display: block; }
.sport-distribution-row small { margin-top: 2px; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.sport-distribution-row b { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.sport-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-primary); }
.sport-dot--trail { background: #f97316; }.sport-dot--cycling { background: #16a34a; }.sport-dot--hiking { background: #a855f7; }.sport-dot--swimming { background: #0891b2; }
.sport-health-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }
.sport-health-card strong { display: block; margin-top: var(--spacing-1); font-size: var(--font-size-xl); }
.sport-health-card small { font-size: var(--font-size-xs); font-weight: 400; }
.sport-health-card p { grid-column: 1 / -1; margin: 0; font-size: var(--font-size-xs); }
.sport-mini-bars { display: flex; align-items: flex-end; grid-column: 1 / -1; gap: 6px; height: 58px; padding-top: var(--spacing-2); border-top: 1px solid var(--color-border-light); }
.sport-mini-bars i { flex: 1; min-height: 4px; border-radius: 3px 3px 0 0; background: var(--color-warning); }
.sport-goal { display: grid; gap: var(--spacing-2); }
.sport-goal > strong { font-size: var(--font-size-xl); }.sport-goal > span, .sport-goal > small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.sport-goal-track { height: 8px; margin: var(--spacing-3) 0; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-tertiary); }.sport-goal-track i { display: block; width: 0; height: 100%; background: var(--color-primary); }
.sport-empty { display: grid; place-items: center; min-height: 120px; padding: var(--spacing-4); color: var(--color-text-secondary); text-align: center; }.sport-empty strong { color: var(--color-text-primary); }.sport-empty p { max-width: 300px; margin: var(--spacing-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }.sport-empty-mark { display: block; margin-bottom: var(--spacing-2); color: var(--color-primary); font-size: 1.8rem; }
.sport-ai-card { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-6); padding: var(--spacing-5); border: 1px dashed var(--color-primary); background: linear-gradient(100deg, var(--color-primary-light), var(--color-bg-primary)); }.sport-ai-card h2 { margin: var(--spacing-1) 0; }.sport-ai-card p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }.sport-ai-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-lg); background: var(--color-primary); color: white; font-size: 1.4rem; }.sport-ai-badge { margin-left: auto; color: var(--color-primary-dark); font-size: var(--font-size-xs); font-weight: 700; white-space: nowrap; }
.sport-goal-row { display: flex; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-2) 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-sm); }.sport-goal-row:last-child { border-bottom: 0; }.sport-goal-row span { color: var(--color-text-secondary); }.sport-goal-row strong { text-align: right; }
.sport-ai-content { flex: 1; min-width: 0; }
.sport-coach-toolbar, .sport-coach-form { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-3); align-items: center; }
.sport-coach-toolbar .form-control, .sport-coach-form .form-control { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.sport-coach-history, .sport-coach-answer, .sport-coach-message p { overflow-wrap: break-word; max-width: 100%; }
@media (max-width: 1100px) { .sport-summary-grid { grid-template-columns: repeat(2, 1fr); }.sport-dashboard-grid--main, .sport-dashboard-grid--three { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sport-dashboard-header { align-items: flex-start; flex-direction: column; }.sport-periods { width: 100%; }.sport-periods .btn { flex: 1; }.sport-summary-grid { gap: var(--spacing-2); }.sport-stat-card { padding: var(--spacing-3); }.sport-stat-card strong { font-size: 1.35rem; }.sport-trend-strip { grid-template-columns: repeat(2, 1fr); }.sport-trend-strip > div { padding: var(--spacing-2) var(--spacing-3); }.sport-card-header { align-items: flex-start; flex-direction: column; gap: var(--spacing-2); }.sport-metric-select { width: 100%; }.sport-activity-metrics { gap: var(--spacing-4); }.sport-ai-card { align-items: flex-start; flex-wrap: wrap; }.sport-ai-badge { display: none; } }

/* Shared ForgeAI UI foundations. Keep these classes framework-free so every module can reuse them. */
:where(.btn, .action-btn, .btn-icon) { min-height: var(--button-height); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
:where(.btn, .action-btn, .btn-icon):active:not(:disabled) { transform: translateY(1px); }
:where(.btn, .action-btn, .btn-icon):disabled { cursor: not-allowed; opacity: .55; }
.btn-primary { box-shadow: 0 1px 2px rgba(37, 99, 235, .18); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 10px rgba(37, 99, 235, .2); }
.btn-danger:hover:not(:disabled) { box-shadow: 0 4px 10px rgba(220, 38, 38, .16); }
.btn-sm { min-height: var(--button-height-sm); }
.btn-icon, .action-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-min-width); padding: var(--spacing-2); border-radius: var(--control-radius); cursor: pointer; }
.action-btn { border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); }
.action-btn:hover:not(:disabled) { border-color: var(--color-border-light); background: var(--color-bg-tertiary); color: var(--color-primary); }
.action-btn.delete:hover:not(:disabled), .action-btn.btn-danger:hover:not(:disabled) { color: var(--color-danger); background: var(--color-danger-light); }
.card { border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-4); padding: var(--spacing-4) var(--spacing-5); border-bottom: 1px solid var(--color-border-light); }
.card-header h2, .card-header h3 { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-lg); }
.card-body { padding: var(--spacing-5); }
:where(.form-control, .form-input, .form-group input, .form-group select, .form-group textarea) { border-radius: var(--control-radius); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
:where(.form-control, .form-input, .form-group input, .form-group select, .form-group textarea):focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
:where(.form-control, .form-input, .form-group input, .form-group select, .form-group textarea):user-invalid { border-color: var(--color-danger); }
.form-help, .field-help, .help-text { display: block; margin-top: var(--spacing-1); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.field-error, .form-error { display: block; margin-top: var(--spacing-1); color: var(--color-danger); font-size: var(--font-size-xs); }
.badge, .status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--spacing-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1; }
.status-badge.active, .badge-success { color: var(--color-success-hover); background: var(--color-success-light); }
.status-badge.inactive, .badge-muted { color: var(--color-text-secondary); background: var(--color-bg-tertiary); }
.badge-warning { color: var(--color-warning-hover); background: var(--color-warning-light); }
.badge-danger { color: var(--color-danger-hover); background: var(--color-danger-light); }
.table-wrapper { overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
.table-wrapper table { border: 0; }
.table-wrapper th { position: sticky; top: 0; z-index: 1; background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); letter-spacing: .03em; text-transform: uppercase; }
.table-wrapper tbody tr { transition: background-color var(--transition-fast); }
.table-wrapper tbody tr:hover { background: var(--color-surface-hover); }
.table-wrapper td, .table-wrapper th { min-height: 52px; padding: var(--spacing-3) var(--spacing-4); }
.table-empty { padding: var(--spacing-10) var(--spacing-4) !important; color: var(--color-text-tertiary); text-align: center; }
.table-empty svg { display: block; margin: 0 auto var(--spacing-3); color: var(--color-text-muted); }
.table-empty p { margin: 0; }
.main-content-loading, .main-content-error, .main-content-empty { border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.main-content-error svg { color: var(--color-danger); }
.main-content-empty svg { color: var(--color-primary); }
.modal-overlay { backdrop-filter: blur(2px); }
.modal-content { border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
.modal-close { min-width: 40px; min-height: 40px; border-radius: var(--radius-md); }
[title] { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.forgeai-notifications { position: fixed; top: var(--spacing-4); right: var(--spacing-4); z-index: var(--z-index-toast); display: grid; gap: var(--spacing-3); width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.forgeai-notification { display: grid; grid-template-columns: 28px 1fr 28px; align-items: start; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-left: 4px solid var(--color-info); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-8px); transition: opacity var(--transition-fast), transform var(--transition-fast); pointer-events: auto; }
.forgeai-notification.is-visible { opacity: 1; transform: translateY(0); }
.forgeai-notification--success { border-left-color: var(--color-success); }.forgeai-notification--warning { border-left-color: var(--color-warning); }.forgeai-notification--error { border-left-color: var(--color-danger); }
.forgeai-notification-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); color: var(--color-info); background: var(--color-info-light); font-weight: 700; }.forgeai-notification--success .forgeai-notification-icon { color: var(--color-success); background: var(--color-success-light); }.forgeai-notification--warning .forgeai-notification-icon { color: var(--color-warning-hover); background: var(--color-warning-light); }.forgeai-notification--error .forgeai-notification-icon { color: var(--color-danger); background: var(--color-danger-light); }
.forgeai-notification-content { display: grid; gap: 2px; color: var(--color-text-secondary); font-size: var(--font-size-sm); }.forgeai-notification-content strong { color: var(--color-text-primary); font-size: var(--font-size-sm); }.forgeai-notification-close { width: 28px; height: 28px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-tertiary); cursor: pointer; font-size: 1.25rem; line-height: 1; }.forgeai-notification-close:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
[data-tooltip] { position: relative; }.action-btn[data-tooltip]::after, [data-tooltip]:not(.action-btn)::after { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: var(--z-index-tooltip); width: max-content; max-width: 220px; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); background: var(--color-bg-inverse); color: var(--color-text-inverse); content: attr(data-tooltip); font-size: var(--font-size-xs); line-height: var(--line-height-normal); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity var(--transition-fast), transform var(--transition-fast); }.action-btn[data-tooltip]:hover::after, .action-btn[data-tooltip]:focus-visible::after, [data-tooltip]:not(.action-btn):hover::after, [data-tooltip]:not(.action-btn):focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.dashboard-loading { display: grid; place-items: center; min-height: 280px; gap: var(--spacing-3); color: var(--color-text-tertiary); }.dashboard-loading .spinner { width: 32px; height: 32px; border: 3px solid var(--color-primary-light); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: spin 800ms linear infinite; }.dashboard-empty { display: grid; place-items: center; min-height: 280px; padding: var(--spacing-8); border: 1px dashed var(--color-border-medium); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text-secondary); text-align: center; }.dashboard-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--spacing-3); border-radius: var(--radius-xl); background: var(--color-primary-light); color: var(--color-primary); font-size: 2rem; }.dashboard-empty h2 { margin: 0 0 var(--spacing-2); color: var(--color-text-primary); font-size: var(--font-size-lg); }.dashboard-empty p { margin: 0; color: var(--color-text-tertiary); }
.buildings-page { display: flex; flex-direction: column; gap: var(--spacing-5); }
.buildings-page .users-header { margin-bottom: 0; padding: var(--spacing-5); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
.buildings-page .users-toolbar { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.buildings-page .users-toolbar .form-input { max-width: 360px; }
.buildings-page .users-pagination { margin-top: 0; padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.buildings-page .table-loading, .buildings-page .table-error { min-height: 220px; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.buildings-page .breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.equipment-page { display: flex; flex-direction: column; gap: var(--spacing-4); }.equipment-page .page-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.equipment-page .filter-group { min-width: 180px; }.equipment-page .page-filters .form-input { min-width: 240px; }.equipment-page .page-info { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }.equipment-page .pagination { padding-top: var(--spacing-3); border-top: 1px solid var(--color-border-light); }
.maintenance-page { display: flex; flex-direction: column; gap: var(--spacing-4); }.maintenance-page .page-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.maintenance-page .page-filters .form-input { min-width: 240px; }.maintenance-page .page-info { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }.maintenance-page .pagination { padding-top: var(--spacing-3); border-top: 1px solid var(--color-border-light); }
.intendance-settings { display: flex; flex-direction: column; gap: var(--spacing-4); }.intendance-settings .page-filters { justify-content: space-between; align-items: center; }.intendance-settings .page-info { margin: var(--spacing-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }.intendance-settings .table-container { overflow-x: auto; }.intendance-settings .action-buttons { display: flex; gap: var(--spacing-1); }.category-exclusion-toggle { display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); }.category-exclusion-toggle input { accent-color: var(--color-primary); }
.intendance-dashboard-page .dashboard-filters { display: flex; align-items: end; flex-wrap: nowrap; gap: var(--spacing-4); padding: var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.intendance-dashboard-page .filter-group { min-width: 180px; }.intendance-dashboard-page .filter-group:first-child { flex: 1 1 420px; }.intendance-dashboard-page .slider-wrapper { display: flex; flex-direction: column; gap: var(--spacing-1); }.intendance-dashboard-page .date-range-values { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }.intendance-dashboard-page .date-range-sliders { position: relative; display: grid; gap: 0; }.intendance-dashboard-page .date-range-sliders input { grid-area: 1 / 1; width: 100%; margin: 0; accent-color: var(--color-primary); }.intendance-dashboard-page .date-range-sliders input:first-child { z-index: 2; background: transparent; }.intendance-dashboard-page .date-range-sliders input:last-child { z-index: 1; }.intendance-dashboard-page .histogram-container { margin-top: var(--spacing-4); min-height: 320px; padding: var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.intendance-dashboard-page .histogram-container canvas { width: 100%; }
@media (max-width: 900px) { .intendance-dashboard-page .dashboard-filters { flex-wrap: wrap; }.intendance-dashboard-page .filter-group:first-child { flex-basis: 100%; } }
.intendance-dashboard-page .date-range-sliders::before { position: absolute; top: 50%; right: calc(100% - var(--range-end, 100%)); left: var(--range-start, 0%); height: 4px; border-radius: 4px; background: var(--color-primary); content: ''; transform: translateY(-50%); pointer-events: none; }.intendance-dashboard-page .date-range-sliders input::-webkit-slider-runnable-track { background: transparent; }.intendance-dashboard-page .date-range-sliders input::-moz-range-track { background: transparent; }
.housing-page { display: flex; flex-direction: column; gap: var(--spacing-4); }.housing-page .page-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.housing-page .page-info { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }.housing-page .pagination { padding-top: var(--spacing-3); border-top: 1px solid var(--color-border-light); }.housing-page .empty-message { display: grid; place-items: center; min-height: 180px; padding: var(--spacing-6); border: 1px dashed var(--color-border-medium); border-radius: var(--radius-lg); color: var(--color-text-tertiary); background: var(--color-surface-raised); }

.housing-page .admin-tab-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.maintenance-page .status-badge.status-active, .maintenance-page .status-badge.active, .housing-page .status-badge.status-active, .housing-page .status-badge.active { color: var(--color-success-hover); background: var(--color-success-light); }.maintenance-page .status-badge.status-inactive, .maintenance-page .status-badge.inactive, .housing-page .status-badge.status-inactive, .housing-page .status-badge.inactive { color: var(--color-text-secondary); background: var(--color-bg-tertiary); }
.table-container { overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }.table-container .data-table { width: 100%; border-collapse: collapse; }.table-container .data-table th { background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); letter-spacing: .03em; text-align: left; text-transform: uppercase; }.table-container .data-table td, .table-container .data-table th { padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--color-border-light); }.table-container .data-table tbody tr:hover { background: var(--color-surface-hover); }
.admin-tabs { box-shadow: var(--shadow-sm); }.admin-tab-panel > .users-page, .admin-tab-panel > .administration-page { min-width: 0; }.ad-management-page, .admin-settings-page { color: var(--color-text-primary); }.ad-config-card, .admin-settings-page .card { border-color: var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }.ad-empty-state { border: 1px dashed var(--color-border-medium); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text-tertiary); }.sport-dashboard .table-container { box-shadow: var(--shadow-sm); }.sport-dashboard .table-error { color: var(--color-danger); }
.page-content > .page-header { padding: var(--spacing-5); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); background: linear-gradient(120deg, var(--color-surface-raised), var(--color-primary-light)); box-shadow: var(--shadow-sm); }
.page-content > .page-header h1 { letter-spacing: -0.02em; }
.page-content > .page-header .page-subtitle { max-width: 680px; }
.header { box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 8px 24px rgba(15, 23, 42, .04); }
.sidebar-brand { padding: var(--spacing-1); }.sidebar-logo { filter: drop-shadow(0 4px 8px rgba(37, 99, 235, .16)); }.sidebar-title { letter-spacing: -.02em; }
.page-content > :where(.card, .table-wrapper, .table-container) { animation: forgeai-enter 220ms ease both; }
@keyframes forgeai-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-content > :where(.card, .table-wrapper, .table-container) { animation: none; } }
.users-page, .building-refs-page { display: flex; flex-direction: column; gap: var(--spacing-5); }.users-page .users-header, .building-refs-page .users-header { margin-bottom: 0; padding: var(--spacing-5); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); background: linear-gradient(120deg, var(--color-surface-raised), var(--color-primary-light)); box-shadow: var(--shadow-sm); }.users-page .users-toolbar, .building-refs-page .users-toolbar { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.users-page .users-pagination, .building-refs-page .users-pagination { margin-top: 0; padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.refs-section { padding: var(--spacing-5); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }.refs-section h3 { margin-top: 0; color: var(--color-text-primary); }.section-desc { color: var(--color-text-secondary); }
.planning-container { overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-md); }.planning-wrapper { scrollbar-color: var(--color-border-medium) transparent; }.planning-table th { background: var(--color-bg-secondary); color: var(--color-text-secondary); }.planning-table td, .planning-table th { border-color: var(--color-border-light); }.planning-cell:not(.planning-cell--block):hover { background: var(--color-primary-light); }.planning-block { box-shadow: var(--shadow-sm); }
.calendar-nav { padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.calendar-table { overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }.calendar-table th { color: var(--color-text-secondary); background: var(--color-bg-secondary); }.calendar-table td, .calendar-table th { border-color: var(--color-border-light); }.calendar-cell--today { box-shadow: inset 0 0 0 2px var(--color-primary); }.calendar-event { box-shadow: var(--shadow-sm); }
.admin-settings-page { display: flex; flex-direction: column; gap: var(--spacing-5); max-width: 960px; }
.admin-settings-page > .card { overflow: hidden; }
/* MODULES PAGE */
.modules-page .module-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-4) 0; border-bottom: 1px solid var(--color-border-light); }
.modules-page .module-item:first-child { padding-top: 0; }
.modules-page .module-item:last-child { padding-bottom: 0; border-bottom: 0; }
.modules-page .module-item__info { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); }
.modules-page .module-item__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2); }
.modules-page .module-item__name { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.modules-page .module-item__version { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.modules-page .module-item__description { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.modules-page .module-item__toggle { flex-shrink: 0; }
.modules-page .module-item__toggle:has(input:disabled) { cursor: not-allowed; }
.modules-page .toggle-switch input[type="checkbox"]:disabled + .toggle-slider { opacity: .5; cursor: not-allowed; }
.modal-form, .modal-body form { display: grid; gap: var(--spacing-4); }.modal-form label, .modal-body form label { color: var(--color-text-primary); }.modal-form label > span, .modal-body form label > span { display: block; margin-bottom: var(--spacing-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }.modal-form input, .modal-form select, .modal-form textarea, .modal-body form input, .modal-body form select, .modal-body form textarea { width: 100%; min-height: var(--input-height); padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-border-medium); border-radius: var(--control-radius); background: var(--color-surface-raised); color: var(--color-text-primary); }
@media (max-width: 640px) { .card-header, .card-body { padding: var(--spacing-4); }.table-wrapper td, .table-wrapper th { padding: var(--spacing-3); }.action-btn { width: 44px; min-height: 44px; } }

/* AGENDA */
.agenda-page { display: flex; flex-direction: column; gap: var(--spacing-5); }
.agenda-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4); }
.agenda-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3); }
.agenda-nav, .agenda-views { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-2); }
.agenda-section { overflow: hidden; }
.agenda-section-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-4) var(--spacing-5); border-bottom: 1px solid var(--color-border-light); background: var(--color-bg-secondary); }
.agenda-section-header--plain { background: transparent; border-bottom: 0; padding-bottom: 0; }
.agenda-section-header h2 { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-lg); display: flex; align-items: center; gap: var(--spacing-2); }
.agenda-section-desc { margin: var(--spacing-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); max-width: 62ch; }
.agenda-section-body { padding: var(--spacing-5); min-width: 0; }
.agenda-mine-scroll { overflow-x: auto; overflow-y: hidden; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.agenda-mine-matrix { display: grid; grid-template-columns: var(--mine-room-col) var(--mine-option-col) repeat(var(--mine-days, 5), minmax(52px, 1fr)) minmax(56px, auto); gap: 1px; background: var(--color-border-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); min-width: 580px; --mine-room-col: 140px; --mine-option-col: 96px; }
.agenda-mine-matrix--month { min-width: max-content; --mine-room-col: 88px; --mine-option-col: 64px; grid-template-columns: var(--mine-room-col) var(--mine-option-col) repeat(var(--mine-days, 31), minmax(28px, 1fr)) minmax(56px, auto); }
.agenda-mine-matrix--month .agenda-mine-matrix-day { gap: 0; padding: 4px 2px; }
.agenda-mine-matrix--month .agenda-mine-day-name { font-size: 9px; letter-spacing: 0; text-transform: none; }
.agenda-mine-matrix--month .agenda-mine-matrix-day .agenda-mine-day-num { font-size: var(--font-size-xs); }
.agenda-mine-matrix--month .agenda-mine-cell { min-height: 36px; }
.agenda-mine-matrix--month .agenda-mine-matrix-label,
.agenda-mine-matrix--month .agenda-mine-matrix-room { padding: var(--spacing-1) var(--spacing-2); font-size: var(--font-size-xs); }
.agenda-mine-matrix--month .agenda-mine-matrix-room small { font-size: 10px; }
.agenda-mine-matrix-head { display: contents; }
.agenda-mine-matrix-corner,
.agenda-mine-matrix-option,
.agenda-mine-matrix-day,
.agenda-mine-matrix-actions-head { padding: var(--spacing-2); background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.agenda-mine-matrix-corner { text-align: left; position: sticky; left: 0; z-index: 3; }
.agenda-mine-matrix-option { position: sticky; left: var(--mine-room-col); z-index: 3; box-shadow: 1px 0 0 var(--color-border-light); }
.agenda-mine-matrix-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.agenda-mine-matrix-day.is-today { background: var(--color-primary-light); color: var(--color-primary-dark); }
.agenda-mine-matrix-day .agenda-mine-day-num { color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.agenda-mine-matrix-day.is-today .agenda-mine-day-num { color: var(--color-primary-dark); }
.agenda-mine-matrix-row { display: contents; }
.agenda-mine-matrix-room { grid-row: span var(--mine-room-rows, 4); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--spacing-2) var(--spacing-3); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--color-border-light); }
.agenda-mine-matrix-room.is-not-first { border-top: 3px solid var(--color-border-dark); background: var(--color-primary-light); color: var(--color-primary-dark); }
.agenda-mine-matrix-room small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-normal); }
.agenda-mine-matrix-room.is-not-first small { color: var(--color-primary-dark); }
.agenda-mine-matrix-label { display: flex; align-items: center; padding: var(--spacing-2) var(--spacing-3); background: var(--color-surface-raised); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); position: sticky; left: var(--mine-room-col); z-index: 2; box-shadow: 1px 0 0 var(--color-border-light); }
.agenda-mine-matrix-row.is-room-start .agenda-mine-matrix-label { box-shadow: inset 0 1px 0 var(--color-border-light); }
.agenda-mine-matrix-row.is-room-separator .agenda-mine-matrix-label,
.agenda-mine-matrix-row.is-room-separator .agenda-mine-cell-group,
.agenda-mine-matrix-row.is-room-separator .agenda-mine-cell,
.agenda-mine-matrix-row.is-room-separator .agenda-mine-bulk,
.agenda-mine-matrix-row.is-room-separator .agenda-mine-matrix-spacer { border-top: 3px solid var(--color-border-dark); }
.agenda-mine-matrix-spacer { background: var(--color-surface-raised); }
.agenda-mine-matrix-row.is-section-break .agenda-mine-matrix-label,
.agenda-mine-matrix-row.is-section-break .agenda-mine-cell-group,
.agenda-mine-matrix-row.is-section-break .agenda-mine-cell,
.agenda-mine-matrix-row.is-section-break .agenda-mine-bulk,
.agenda-mine-matrix-row.is-section-break .agenda-mine-matrix-spacer { border-top: 2px solid var(--color-border-medium); }
.agenda-mine-cell { min-height: 44px; border: 0; background: var(--color-surface-raised); cursor: pointer; position: relative; }
.agenda-mine-cell:hover:not(:disabled), .agenda-mine-cell:focus-visible:not(:disabled) { background: var(--color-primary-light); }
.agenda-mine-cell.is-on { background: var(--color-success-light); box-shadow: inset 0 0 0 2px var(--color-success); }
.agenda-mine-cell.is-on::after { content: '✓'; color: var(--color-success-hover); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.agenda-mine-cell--desk.is-on { background: var(--color-primary-light); box-shadow: inset 0 0 0 2px var(--color-primary); }
.agenda-mine-cell--desk.is-on::after { content: '✓'; color: var(--color-primary-dark); }
.agenda-mine-cell--meal.is-on { background: var(--color-warning-light); box-shadow: inset 0 0 0 2px var(--color-warning); }
.agenda-mine-cell--meal.is-on::after { content: '✓'; color: var(--color-warning-hover); }
.agenda-mine-cell--remote.is-on { background: var(--color-info-light); box-shadow: inset 0 0 0 2px var(--color-info); }
.agenda-mine-cell--remote.is-on::after { content: '✓'; color: var(--color-info-hover); }
/* Ligne unique « Télétravail » : bandeau d'étiquettes (Matin / Après-midi)
   au-dessus des deux moitiés cliquables, sans local. Hauteur de rangée
   identique aux autres lignes de la matrice. */
.agenda-mine-matrix-room--remote { grid-row: span 1; }
.agenda-mine-cell-group { display: flex; flex-direction: column; min-height: 44px; background: var(--color-surface-raised); overflow: hidden; }
.agenda-mine-cell-tags { display: flex; flex: 0 0 auto; height: 15px; align-items: center; }
.agenda-mine-cell-tag { flex: 1 1 50%; min-width: 0; text-align: center; font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; pointer-events: none; }
.agenda-mine-cell-halves { display: flex; flex: 1 1 auto; min-height: 0; }
.agenda-mine-cell-group .agenda-mine-cell { flex: 1 1 50%; min-width: 0; min-height: 0; }
.agenda-mine-cell-halves .agenda-mine-cell + .agenda-mine-cell { border-left: 1px solid var(--color-border-medium); }
/* La bordure de séparation porte sur le groupe entier, pas sur ses moitiés. */
.agenda-mine-matrix-row.is-room-separator .agenda-mine-cell-group .agenda-mine-cell,
.agenda-mine-matrix-row.is-section-break .agenda-mine-cell-group .agenda-mine-cell { border-top: 0; }
.agenda-mine-matrix--month .agenda-mine-cell-group { min-height: 36px; }
.agenda-mine-matrix--month .agenda-mine-cell-tags { height: 12px; }
.agenda-mine-matrix--month .agenda-mine-cell-tag { font-size: 9px; }
.agenda-mine-matrix--month .agenda-mine-cell-group .agenda-mine-cell::after { font-size: 10px; }
.agenda-mine-cell:disabled { opacity: .45; cursor: not-allowed; }
/* Semaines verrouillées : l'inscription reste visible en couleurs (coches
   conservées), seule la case devient non cliquable ; l'en-tête de jour
   signale la colonne figée. */
.agenda-mine-cell.is-locked:disabled { opacity: 1; cursor: not-allowed; }
.agenda-mine-matrix-day.is-locked { opacity: .6; }
.agenda-mine-bulk { align-self: center; justify-self: center; margin: 4px; min-height: 32px; }
.agenda-mine-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-top: var(--spacing-4); }
.agenda-field-help { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-xs); max-width: 70ch; }
.agenda-badge--meal { background: var(--color-warning-light); color: var(--color-warning-hover); }
.agenda-free-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-3); align-items: end; }
.agenda-free-grid .form-control-wrap:nth-child(1) { grid-column: span 4; }
.agenda-free-grid .form-control-wrap:nth-child(2) { grid-column: span 3; }
.agenda-free-grid .form-control-wrap:nth-child(3) { grid-column: span 2; }
.agenda-free-grid .form-control-wrap:nth-child(4) { grid-column: span 2; }
.agenda-free-desk { grid-column: span 1; align-self: center; }
.agenda-free-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.agenda-free-grid .form-control-wrap > span { display: block; margin-bottom: var(--spacing-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.agenda-period-label { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.agenda-search-wrap { margin-left: auto; min-width: 200px; }
.agenda-search { min-width: 150px; flex: 1; }
.agenda-card { overflow: hidden; }
/* Page inscriptions : pas de hauteur max → le tableau s'empile et la page
   défile verticalement ; le défilement horizontal n'apparaît que si le
   tableau dépasse réellement la largeur (plus en semaine ≤480px). */
.agenda-scroll { overflow: auto; max-height: none; max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.agenda-table { width: 100%; border-collapse: collapse; min-width: 0; }
.agenda-table--half { min-width: 1100px; }
.agenda-half-head, .agenda-half-corner { min-width: 72px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: none; letter-spacing: 0; color: var(--color-text-secondary); background: var(--color-bg-secondary); white-space: nowrap; }
.agenda-half-subhead { font-size: var(--font-size-xs); line-height: var(--line-height-tight); font-weight: var(--font-weight-normal); text-transform: none; letter-spacing: 0; color: var(--color-text-tertiary); padding-top: 0; padding-bottom: 0; }
.agenda-table--half .agenda-cell-btn { min-width: 72px; }
.agenda-table th, .agenda-table td { padding: var(--spacing-2); border-bottom: 1px solid var(--color-border-light); text-align: center; }
.agenda-table thead th { background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .03em; }
.agenda-day-head { display: table-cell; }
.agenda-day-head .agenda-day-name { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); line-height: var(--line-height-tight); }
.agenda-day-head .agenda-day-num { display: block; color: var(--color-text-primary); font-size: var(--font-size-sm); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
.agenda-day-head.is-today .agenda-day-num { color: var(--color-primary); }
.agenda-room-head { min-width: 180px; text-align: left !important; background: var(--color-bg-secondary); }
.agenda-room-head .agenda-room-name { display: block; color: var(--color-text-primary); font-size: var(--font-size-sm); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); text-transform: none; letter-spacing: 0; }
.agenda-room-head .agenda-room-meta { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); line-height: var(--line-height-tight); font-weight: var(--font-weight-normal); text-transform: none; letter-spacing: 0; }
.agenda-corner { background: var(--color-bg-secondary); }
.agenda-cell-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; min-height: 48px; padding: var(--spacing-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); cursor: pointer; }
.agenda-cell-btn:hover, .agenda-cell-btn:focus-visible { border-color: var(--color-primary); background: var(--color-primary-light); }
.agenda-cell.has-presence .agenda-cell-btn { background: transparent; border-color: var(--color-border-light); }
.agenda-count { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; }
.agenda-count--desk { color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.agenda-count--desk.is-over { color: var(--color-danger); }
.agenda-cell-names { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; max-width: 140px; }
.agenda-cell-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; font-size: 10px; line-height: 1.2; color: var(--color-text-secondary); }
.agenda-cell-name-text { display: block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.agenda-cell-name .agenda-badge { padding: 0 4px; font-size: 9px; }
.agenda-period-wrap { min-width: 130px; }
.agenda-table--people { min-width: 0; --agenda-head-row1-h: 34px; }
.agenda-table--people th[data-day] { cursor: pointer; }
.agenda-table--people thead th { position: sticky; z-index: 5; background: var(--color-bg-secondary); }
.agenda-table--people thead tr:first-child th { top: 0; height: var(--agenda-head-row1-h); z-index: 6; box-shadow: 0 1px 0 var(--color-border-light); }
.agenda-table--people thead tr:nth-child(2) th { top: var(--agenda-head-row1-h); z-index: 5; }
.agenda-table--people .agenda-room-head { position: sticky; left: 32px; z-index: 6; min-width: 100px; max-width: 160px; box-shadow: 1px 0 0 var(--color-border-light); }
.agenda-table--people thead .agenda-room-head { z-index: 7; }
.agenda-table--people td { padding: 1px 2px; }
/* Ligne de compteurs planning (Prés / Repas / Postes) */
.agenda-planning-counter-row { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-light); }
.agenda-planning-counter-row th.agenda-planning-counter-label {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-1) var(--spacing-2);
  text-align: right;
  white-space: nowrap;
  border-right: 1px solid var(--color-border-light);
}
.agenda-planning-counter-row td.agenda-planning-counter {
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  padding: var(--spacing-1) var(--spacing-2);
  white-space: nowrap;
}
.agenda-table--people td { padding: 1px 2px; }
/* Séparateur vertical entre chaque jour */
.agenda-table--people .agenda-day-head:not(.agenda-day-first),
.agenda-table--people .agenda-half-subhead:not(.agenda-half-first):not(.agenda-half-last),
.agenda-table--people .agenda-cell--morning:not(.agenda-cell--day-first) { border-left: 1px solid var(--color-border-medium); }
/* Bordure fine entre matin et après-midi */
.agenda-table--people .agenda-half-subhead.agenda-half-last,
.agenda-table--people .agenda-cell--afternoon { border-left: 1px solid var(--color-border-light); }
/* En mode mois, les week-ends sont retirés : double trait entre vendredi et lundi. */
.agenda-table--people .is-after-weekend,
.agenda-mine-matrix .is-after-weekend { border-left: 3px double var(--color-border-light); }
.agenda-table--people td.agenda-cell--morning.is-after-weekend,
.agenda-table--people th.agenda-half-subhead.is-after-weekend {
  border-left: 3px double var(--color-border-light);
}
.agenda-person-head { vertical-align: middle; }
.agenda-people-cell { min-width: 44px; flex-direction: row; justify-content: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-2); line-height: var(--line-height-tight); }
.agenda-people-cell-room { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.agenda-people-cell-flag { font-size: var(--font-size-xs); line-height: var(--line-height-tight); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-tertiary); }
.agenda-people-cell.is-empty .agenda-people-cell-flag.is-add { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.agenda-people-cell:disabled { opacity: .8; cursor: default; }
.agenda-people-cell:disabled:hover, .agenda-people-cell:disabled:focus-visible { border-color: transparent; background: transparent; }
.agenda-table--people-month { min-width: 0; width: 100%; table-layout: fixed; --agenda-head-row1-h: 26px; }
.agenda-table--people-month .agenda-team-head, .agenda-table--people-month .agenda-team-cell { width: 22px; }
.agenda-table--people-month thead tr:first-child th { top: 0; z-index: 9; }
.agenda-table--people-month thead tr:nth-child(2) th { top: 26px; z-index: 8; background: var(--color-bg-secondary); }
.agenda-table--people-month .agenda-corner, .agenda-table--people-month .agenda-room-head { width: 110px; min-width: 110px; max-width: 110px; }
.agenda-table--people-month .agenda-day-head { width: 30px; min-width: 0; padding: 2px 1px; }
.agenda-table--people-month .agenda-half-subhead { width: 15px; padding: 1px; font-size: 8px; }
.agenda-table--people-month .agenda-people-cell { min-width: 0; min-height: 18px; padding: 1px; gap: 1px; }
.agenda-table--people-month .agenda-cell-btn { min-width: 0; min-height: 16px; padding: 1px; }
.agenda-table--people-month td.agenda-cell.has-presence { background: #dcfce7; }
.agenda-table--people-month td.agenda-cell.has-presence .agenda-people-cell { background: transparent; border-color: transparent; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.agenda-people-cell-icons { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 18px; }
.agenda-table--people td.agenda-cell.is-remote { background: var(--color-warning-light); }
.agenda-remote-marker { color: var(--color-warning-hover); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1; }
.agenda-people-cell-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: #16a34a; flex-shrink: 0; }
.agenda-people-cell.is-compact.is-empty { min-width: 0; }
.agenda-mini-icon { flex-shrink: 0; color: var(--color-text-secondary); }

/* Synthèse agenda */
.agenda-table--synthesis { min-width: 0; }
.agenda-table--synthesis th, .agenda-table--synthesis td { padding: 2px var(--spacing-2); font-size: var(--font-size-sm); }
.agenda-table--synthesis thead th { background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .03em; }
.agenda-table--synthesis .agenda-synthesis-corner { background: var(--color-bg-secondary); position: sticky; left: 0; z-index: 3; min-width: 80px; }
.agenda-table--synthesis .agenda-synthesis-capacity-head { background: var(--color-bg-secondary); min-width: 56px; }
.agenda-table--synthesis .agenda-synthesis-day-head { background: var(--color-bg-secondary); text-align: center; }
.agenda-table--synthesis .agenda-synthesis-day-head .agenda-day-name { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.agenda-table--synthesis .agenda-synthesis-day-head .agenda-day-num { display: block; color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.agenda-table--synthesis .agenda-synthesis-day-head.is-today .agenda-day-num { color: var(--color-primary); }
.agenda-table--synthesis .agenda-synthesis-total-head { background: var(--color-bg-secondary); position: sticky; right: 0; z-index: 2; min-width: 60px; }
.agenda-table--synthesis .agenda-synthesis-room-name { position: sticky; left: 0; z-index: 2; background: var(--color-bg-secondary); min-width: 100px; max-width: 160px; text-align: left; padding: 2px var(--spacing-2); font-weight: var(--font-weight-medium); box-shadow: 1px 0 0 var(--color-border-light); }
.agenda-table--synthesis .agenda-synthesis-capacity { background: var(--color-bg-secondary); min-width: 56px; text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: 2px var(--spacing-1); }
.agenda-table--synthesis .agenda-synthesis-cell { text-align: center; min-width: 40px; font-weight: var(--font-weight-semibold); padding: 1px var(--spacing-2); line-height: 1.3; }
.agenda-table--synthesis .agenda-synthesis-cell--persons { background: var(--color-primary-light); color: var(--color-primary-dark); }
.agenda-table--synthesis .agenda-synthesis-cell--meals { background: var(--color-warning-light); color: var(--color-warning-hover); }
.agenda-table--synthesis .agenda-synthesis-cell--workstations { background: var(--color-info-light); color: var(--color-info-hover); }
.agenda-table--synthesis .agenda-synthesis-cell.over-capacity { background: var(--color-danger-light); color: var(--color-danger); }
.agenda-table--synthesis .agenda-synthesis-total { background: var(--color-bg-tertiary); font-weight: var(--font-weight-bold); position: sticky; right: 0; z-index: 1; min-width: 50px; text-align: center; }
.agenda-table--synthesis tfoot .agenda-synthesis-grand-total { background: var(--color-bg-tertiary); }
.agenda-table--synthesis tfoot .agenda-synthesis-grand-total-cell { font-weight: var(--font-weight-bold); min-width: 60px; }
.agenda-table--synthesis tfoot .agenda-synthesis-grand-total-cell.agenda-synthesis-total--persons { background: var(--color-primary); color: white; }
.agenda-table--synthesis tfoot .agenda-synthesis-grand-total-cell.agenda-synthesis-total--meals { background: var(--color-warning); color: white; }
.agenda-table--synthesis tfoot .agenda-synthesis-grand-total-cell.agenda-synthesis-total--workstations { background: var(--color-info); color: white; }
.agenda-table--synthesis-month { min-width: max-content; }
.agenda-table--synthesis-month th, .agenda-table--synthesis-month td { padding: 2px 4px; font-size: var(--font-size-xs); }
.agenda-table--synthesis-month .agenda-synthesis-room-name { min-width: 72px; max-width: 100px; }
.agenda-table--synthesis-month .agenda-synthesis-cell { min-width: 32px; }
.agenda-table--synthesis-month .agenda-synthesis-corner { min-width: 56px; }
.agenda-table--synthesis-month .agenda-week-start { border-left: 3px solid var(--color-border); }

.agenda-synthesis-summary { display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-top: var(--spacing-3); }
.summary-card { flex: 1 1 180px; min-width: 160px; padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); text-align: center; }
.summary-label { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--spacing-1); }
.summary-value { display: block; color: var(--color-text-primary); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }

.agenda-cell-form-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-4); }
.agenda-cell-form-grid .form-control-wrap { display: block; width: auto; min-width: 240px; flex: 0 0 auto; }
.agenda-cell-form-grid .agenda-check { display: inline-flex; flex-direction: row; align-items: center; width: auto; gap: var(--spacing-2); }
.agenda-cell-form-grid .agenda-check input { width: 18px; height: 18px; padding: 0; border: none; }
.agenda-cell-form-grid .form-control-wrap > span { display: block; margin-bottom: var(--spacing-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.agenda-planning-toolbar { display: flex; align-items: center; gap: var(--spacing-3); }
.agenda-add-person-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-4); }
.agenda-add-person-grid .form-control-wrap { display: block; width: auto; min-width: 220px; flex: 0 0 auto; }
.agenda-add-person-grid .agenda-check { display: inline-flex; flex-direction: row; align-items: center; width: auto; gap: var(--spacing-2); }
.agenda-add-person-grid .agenda-check input { width: 18px; height: 18px; padding: 0; border: none; }
.agenda-add-person-grid .form-control-wrap > span { display: block; margin-bottom: var(--spacing-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.agenda-badge--period { background: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px dashed var(--color-border-medium); }
.agenda-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-4); color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.agenda-legend-item { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.agenda-dot { width: 10px; height: 10px; border-radius: var(--radius-full); }
.agenda-dot--people { background: var(--color-success); }
.agenda-dot--desk { background: var(--color-text-tertiary); }
.agenda-dot--user, .agenda-dot--external { background: var(--color-primary); }
.agenda-dot--cleaning { background: var(--color-info); }
.agenda-dot--occupant { background: var(--color-warning); }
.agenda-dot--user, .agenda-dot--external { background: var(--color-primary); }
.agenda-dot--cleaning { background: var(--color-info); }
.agenda-dot--occupant { background: var(--color-warning); }
.agenda-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.agenda-badge--cleaning { background: var(--color-info-light); color: var(--color-info-hover); }
.agenda-badge--occupant { background: var(--color-warning-light); color: var(--color-warning-hover); }
.agenda-badge--desk, .agenda-badge--user, .agenda-badge--external { background: var(--color-primary-light); color: var(--color-primary-dark); }
.agenda-badge--remote { background: var(--color-info-light); color: var(--color-info-hover); }
.agenda-people-cell-flag--remote { color: var(--color-info-hover); }
.agenda-check.is-disabled { opacity: .5; }
.agenda-integrated { padding: var(--spacing-4); border-top: 1px solid var(--color-border-light); background: var(--color-bg-secondary); }
.agenda-integrated h3 { margin: 0 0 var(--spacing-3); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.agenda-integrated-list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.agenda-integrated-day-btn { padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-text-primary); cursor: pointer; text-align: left; }
.agenda-integrated-day-btn:hover { border-color: var(--color-primary); }
.agenda-integrated-day-btn span { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.agenda-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.agenda-month th { padding: var(--spacing-2); background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; }
.agenda-month td { height: 96px; padding: 0; border: 1px solid var(--color-border-light); vertical-align: top; }
.agenda-month td.is-empty { background: var(--color-bg-secondary); opacity: .5; }
.agenda-month td.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); }
.agenda-month-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; height: 100%; padding: var(--spacing-2); border: 0; background: transparent; color: var(--color-text-primary); cursor: pointer; text-align: left; }
.agenda-month-btn:hover { background: var(--color-primary-light); }
.agenda-month-num { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.agenda-month-total { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-success-light); color: var(--color-success-hover); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.agenda-month-integrated { color: var(--color-info-hover); font-size: var(--font-size-xs); }
.agenda-empty { display: grid; place-items: center; min-height: 180px; padding: var(--spacing-6); color: var(--color-text-secondary); text-align: center; }
.agenda-empty h2 { margin: 0 0 var(--spacing-2); color: var(--color-text-primary); }
.agenda-empty p { margin: 0 0 var(--spacing-4); color: var(--color-text-tertiary); }
.agenda-day-overlay { display: flex; align-items: stretch; justify-content: center; padding: var(--spacing-4); }
.agenda-day-modal { position: fixed; inset: 0; z-index: var(--z-index-modal); display: none; }
.agenda-day-modal.open { display: flex; align-items: stretch; justify-content: center; padding: var(--spacing-4); }
.agenda-day-modal-content { width: min(720px, 100%); max-height: min(90vh, 900px); margin: auto; }
.agenda-day-header { align-items: flex-start; gap: var(--spacing-3); }
.agenda-day-header-text { min-width: 0; }
.agenda-day-header h2 { word-break: break-word; }
.agenda-day-totals { margin: var(--spacing-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.agenda-eyebrow { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .08em; }
.agenda-day-body { display: grid; gap: var(--spacing-4); padding: var(--spacing-5); }
.agenda-day-footer { display: flex; justify-content: flex-end; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-5); border-top: 1px solid var(--color-border-light); background: var(--color-bg-secondary); flex-shrink: 0; }
.agenda-check { display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.agenda-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.agenda-day-rooms { display: grid; gap: var(--spacing-3); }
.agenda-room-block { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.agenda-room-block header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-2); margin-bottom: var(--spacing-2); }
.agenda-room-block h3 { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-base); }
.agenda-room-block h3 .agenda-room-building { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); }
.agenda-room-block.is-selected { border-color: var(--color-primary); }
/* Bloc « Télétravail » du détail du jour (présences sans local). */
.agenda-remote-block { border-left: 3px solid var(--color-info); }

/* Modal planning semaine — grille Local / Option / Jours */
.agenda-person-week-header-text { min-width: 0; }
.agenda-person-week-meta { margin: var(--spacing-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.agenda-person-week-body { overflow-x: auto; }
.agenda-person-week-content { width: min(920px, 94%); }

.agenda-room-stats { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.agenda-people { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; }
.agenda-person { display: inline-flex; align-items: center; gap: var(--spacing-2); max-width: 100%; padding: var(--spacing-1) var(--spacing-2); border: 1px solid var(--color-border-light); border-radius: var(--radius-full); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.agenda-person.is-mine { border-color: var(--color-primary); background: var(--color-primary-light); }
.agenda-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.agenda-person-remove { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-tertiary); cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; }
.agenda-person-remove:hover { background: var(--color-danger-light); color: var(--color-danger); }
.agenda-none { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.agenda-integrated-block { background: var(--color-bg-secondary); }
.agenda-toast { position: fixed; right: var(--spacing-4); bottom: var(--spacing-4); z-index: var(--z-index-toast); max-width: min(360px, calc(100vw - 2rem)); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-lg); background: var(--color-bg-inverse); color: var(--color-text-inverse); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast); pointer-events: none; font-size: var(--font-size-sm); }
.agenda-toast.is-visible { opacity: 1; transform: translateY(0); }
.agenda-toast--success { background: var(--color-success-hover); }
.agenda-toast--error { background: var(--color-danger-hover); }
.agenda-toast--info { background: var(--color-info-hover); }
.agenda-month-cell.is-weekend { background: var(--color-bg-secondary); opacity: .7; }

@media (max-width: 1199px) {
  .agenda-table { min-width: 640px; }
  .agenda-free-grid .form-control-wrap:nth-child(1),
  .agenda-free-grid .form-control-wrap:nth-child(2),
  .agenda-free-grid .form-control-wrap:nth-child(3),
  .agenda-free-grid .form-control-wrap:nth-child(4) { grid-column: span 6; }
  .agenda-free-desk { grid-column: span 6; }
}

@media (max-width: 767px) {
  .agenda-header { flex-direction: column; align-items: stretch; }
  .agenda-toolbar { width: 100%; }
  .agenda-nav, .agenda-views { width: 100%; }
  .agenda-nav .btn, .agenda-views .btn { flex: 1 1 auto; }
  .agenda-section-header { padding: var(--spacing-4); }
  .agenda-section-body { padding: var(--spacing-4); }
  .agenda-room-head { min-width: 140px; }
  .agenda-month td { height: 72px; }
  .agenda-mine-matrix { grid-template-columns: var(--mine-room-col) var(--mine-option-col) repeat(var(--mine-days, 5), minmax(48px, 1fr)) minmax(56px, auto); min-width: 520px; --mine-room-col: 88px; --mine-option-col: 64px; }
  .agenda-mine-matrix--month { min-width: max-content; --mine-room-col: 72px; --mine-option-col: 52px; grid-template-columns: var(--mine-room-col) var(--mine-option-col) repeat(var(--mine-days, 31), minmax(28px, 1fr)) minmax(56px, auto); }
  .agenda-mine-matrix--month .agenda-mine-cell { min-height: 32px; }
  .agenda-free-grid { grid-template-columns: minmax(0, 1fr); }
  .agenda-free-grid .form-control { width: 100%; min-width: 0; }
  .agenda-search-wrap { min-width: 0; width: 100%; }
  .agenda-free-grid .form-control-wrap:nth-child(1),
  .agenda-free-grid .form-control-wrap:nth-child(2),
  .agenda-free-grid .form-control-wrap:nth-child(3),
  .agenda-free-grid .form-control-wrap:nth-child(4),
  .agenda-free-desk { grid-column: auto; }
  .agenda-free-actions { justify-content: stretch; }
  .agenda-free-actions .btn { width: 100%; }
  .agenda-day-overlay,
  .agenda-day-modal.open { padding: 0; align-items: stretch; }
  .agenda-day-modal-content { width: 100%; max-width: none; max-height: 100vh; height: 100%; margin: 0; border-radius: 0; }
  .agenda-day-header { padding: var(--spacing-4); }
  .agenda-day-body { padding: var(--spacing-4); }
  .agenda-day-footer { padding: var(--spacing-3) var(--spacing-4); }
  .agenda-day-footer .btn { width: 100%; }
  .agenda-table--synthesis .agenda-synthesis-total { position: static; }
  .agenda-table--synthesis .agenda-synthesis-total-head { position: static; }
}

@media (max-width: 639px) {
  .agenda-page { gap: var(--spacing-3); }
  .agenda-table { min-width: 560px; }
  .agenda-cell-btn { min-width: 52px; min-height: 44px; }
  .agenda-month td { height: 56px; }
  .agenda-person { max-width: 100%; }
  .agenda-person-name { max-width: 120px; }
  .agenda-section-header h2 { font-size: var(--font-size-base); }
}

@media (max-width: 480px) {
  .agenda-mine-matrix:not(.agenda-mine-matrix--month) {
    min-width: 0;
    --mine-room-col: 28px;
    --mine-option-col: 36px;
    grid-template-columns: var(--mine-room-col) var(--mine-option-col) repeat(var(--mine-days, 5), minmax(40px, 1fr)) minmax(40px, auto);
  }
  .agenda-mine-matrix-room {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: var(--spacing-1) 0;
    font-size: var(--font-size-xs);
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .agenda-mine-matrix-room small { font-size: 8px; }
  .agenda-mine-matrix-label {
    padding: var(--spacing-1) 2px;
    font-size: 8px;
    text-align: center;
    line-height: 1.1;
    word-break: break-word;
    hyphens: auto;
  }
  .agenda-mine-matrix-day { padding: var(--spacing-1) 0; gap: 1px; }
  .agenda-mine-day-name { font-size: 6px; letter-spacing: 0; }
  .agenda-mine-day-num { font-size: 10px; }
  .agenda-mine-cell { min-height: 34px; }
  .agenda-mine-cell-tags { height: 12px; }
  .agenda-mine-cell-tag { font-size: 8px; }
  .agenda-mine-matrix-corner { font-size: 7px; padding: var(--spacing-1); }
  .agenda-mine-matrix-option { font-size: 7px; padding: var(--spacing-1); }
  .agenda-mine-bulk { font-size: 8px; padding: 2px 4px; min-height: 24px; }
  .agenda-mine-matrix-corner { left: 0; }
  .agenda-mine-matrix-option { left: var(--mine-room-col); }
  .agenda-mine-matrix-label { left: var(--mine-room-col); }
  .agenda-mine-matrix-room { left: 0; }
  .agenda-mine-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .agenda-mine-grid-wrapper::-webkit-scrollbar { height: 6px; }
  .agenda-mine-grid-wrapper::-webkit-scrollbar-thumb { background: var(--color-border-medium); border-radius: 3px; }
}

@media (max-width: 480px) {
  /* Tableau forcé à la largeur de la page (pas de scroll interne) ; la page
     seule défile verticalement (max-height: none en base). */
  .agenda-table--people-month { min-width: 0; }
  .agenda-table--people:not(.agenda-table--people-month) {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }
  .agenda-table--people-month .agenda-room-head { min-width: 72px; max-width: 72px; width: 72px; }
  .agenda-table--people .agenda-room-head {
    position: static;
    min-width: 44px;
    max-width: 44px;
    width: 44px;
  }
  .agenda-table--people .agenda-team-head,
  .agenda-table--people .agenda-team-cell { width: 20px; min-width: 20px; max-width: 20px; }
  .agenda-table--people .agenda-team-name { font-size: 7px; }
  .agenda-table--people .agenda-room-head .agenda-room-name {
    font-size: 8px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.15;
    display: block;
  }
  .agenda-table--people .agenda-room-head .agenda-room-meta { display: none; }
  .agenda-table--people:not(.agenda-table--people-month) .agenda-day-head { min-width: 0; }
  .agenda-table--people .agenda-day-head .agenda-day-name { font-size: 7px; }
  .agenda-table--people .agenda-day-head .agenda-day-num { font-size: 10px; }
  .agenda-table--people .agenda-half-subhead {
    font-size: 7px;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.1;
  }
  .agenda-table--people .agenda-people-cell { min-width: 0; padding: 2px 1px; overflow: hidden; }
  .agenda-table--people .agenda-people-cell-room { max-width: 100%; font-size: 8px; }
  .agenda-table--people .agenda-people-cell-flag { font-size: 7px; }
  .agenda-table--people .agenda-people-cell.is-empty .agenda-people-cell-flag.is-add { font-size: 10px; }
  .agenda-table--people th, .agenda-table--people td { padding: 1px 2px; }
  .agenda-table--people thead th { padding: 3px 2px; }
  .agenda-table--people .agenda-corner { min-width: 44px; width: 44px; }
  .agenda-table--people .agenda-cell-btn { min-width: 0; max-width: 100%; padding: 2px; overflow: hidden; }
  .agenda-table--people .agenda-person-head { min-width: 44px; }
  .agenda-table--people-month .agenda-day-head { min-width: 0; width: auto; }
  .agenda-table--people-month .agenda-half-subhead { min-width: 0; width: auto; }
  .agenda-table--people-month .agenda-people-cell { min-width: 0; padding: 1px; }
  .agenda-table--people-month .agenda-cell-btn { min-width: 0; min-height: 16px; padding: 1px; }
  .agenda-table--people-month .agenda-corner { min-width: 72px; width: 72px; }
  .agenda-table--people-month .agenda-person-head { min-width: 0; }
}

/* Domotique */
.domo-page { display: flex; flex-direction: column; gap: var(--spacing-4); max-width: 1440px; }
.domo-header { align-items: flex-end; }
.domo-kicker, .domo-eyebrow { display: block; color: var(--color-primary); font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.domo-kicker { margin-bottom: var(--spacing-2); }
.domo-flash { padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--color-border-light); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-bg-secondary); font-size: var(--font-size-sm); }
.domo-status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-border-light); }
.domo-strip-item { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); background: var(--color-bg-secondary); font-size: var(--font-size-sm); }
.domo-strip-item strong { color: var(--color-text-primary); }
.domo-strip-label { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.domo-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-text-muted); }
.domo-dot--ok { background: var(--color-success); }
.domo-dot--warn { background: var(--color-warning); }
.domo-dot--ko { background: var(--color-danger); }
.domo-dot--idle { background: var(--color-text-muted); }
.domo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-4); }
.domo-card { min-width: 0; }
.domo-card--big .domo-big { display: block; margin: var(--spacing-2) 0; color: var(--color-text-primary); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; line-height: 1; }
.domo-range { display: flex; flex-wrap: wrap; gap: var(--spacing-3); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.domo-target { color: var(--color-text-secondary); font-weight: 600; }
.domo-views, .domo-periods { display: flex; gap: var(--spacing-1); flex-wrap: wrap; }
.domo-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-4); }
.domo-chart-wrap { min-height: 180px; }
.domo-chart { display: block; width: 100%; height: 180px; overflow: visible; }
.domo-line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.domo-line-target { fill: none; stroke: var(--color-warning); stroke-width: 1.5; stroke-dasharray: 5 4; }
.domo-line-target-label { fill: var(--color-warning); font-size: 10px; }
.domo-lane-label { fill: var(--color-text-muted); font-size: 11px; }
.domo-lane-base { stroke: var(--color-bg-tertiary); stroke-width: 1; stroke-dasharray: 4 4; }
.domo-chart-labels { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.domo-progress { height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-tertiary); }
.domo-progress i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.domo-progress-label { display: flex; justify-content: space-between; margin-bottom: var(--spacing-1); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.domo-loss { color: var(--color-text-primary); font-size: var(--font-size-xl); font-weight: 700; }
.domo-phase-track { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.domo-phase { display: flex; flex-direction: column; min-width: 140px; padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-bg-secondary); font-size: var(--font-size-xs); }
.domo-phase strong { color: var(--color-text-primary); font-size: var(--font-size-sm); }
.domo-phase--active { border-color: var(--color-primary); background: var(--color-primary-light); }
.domo-phase--done { opacity: .65; }
.domo-phase--pending { color: var(--color-text-muted); }
.domo-cycle-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: var(--spacing-4); }
.domo-outputs { display: grid; gap: var(--spacing-3); }
.domo-output { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.domo-output-main { min-width: 0; flex: 1; }
.domo-output-main strong, .domo-output-main small { display: block; }
.domo-output-main small { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.domo-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 700; text-transform: capitalize; }
.domo-badge--running { background: #dcfce7; color: #166534; }
.domo-badge--preparing { background: #dbeafe; color: #1e40af; }
.domo-badge--paused { background: #fef3c7; color: #92400e; }
.domo-badge--completed { background: #e0e7ff; color: #3730a3; }
.domo-badge--error, .domo-badge--stopped { background: #fee2e2; color: #991b1b; }
.domo-badge--on { background: #dcfce7; color: #166534; }
.domo-badge--off { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); }
.domo-badge--auto { background: #dbeafe; color: #1e40af; }
.domo-badge--manual { background: #fef3c7; color: #92400e; }
.domo-events { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-border-light); max-height: 380px; overflow-y: auto; }
.domo-event { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--spacing-2); padding: var(--spacing-3); background: var(--color-bg-primary); font-size: var(--font-size-sm); }
.domo-event-icon { font-size: var(--font-size-base); }
.domo-event-message { color: var(--color-text-primary); }
.domo-event-time { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.domo-form { display: grid; gap: var(--spacing-3); }
.domo-form label, .domo-form--2 label { display: flex; flex-direction: column; gap: var(--spacing-1); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 600; }
.domo-form--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-3); align-items: end; }
.domo-form--2 .domo-span { grid-column: 1 / -1; }
.domo-actions { display: flex; gap: var(--spacing-2); flex-wrap: wrap; align-items: center; }
.domo-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4); }
.domo-config-row { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-sm); }
.domo-config-row:last-child { border-bottom: 0; }
.domo-config-row > span { flex: 1; }
.domo-config-row .form-control { width: 170px; }
.domo-check { display: flex; align-items: center; gap: var(--spacing-2); white-space: nowrap; font-weight: 500; color: var(--color-text-secondary); }
.domo-test { margin-top: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.domo-test.is-ok { background: #dcfce7; color: #166534; }
.domo-test.is-ko { background: #fee2e2; color: #991b1b; }
.domo-profiles .card-header { flex-wrap: wrap; gap: var(--spacing-3); }
.domo-table-wrap { overflow-x: auto; margin: var(--spacing-4) 0; }
.domo-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: var(--font-size-xs); }
.domo-table th { padding: var(--spacing-2); border-bottom: 2px solid var(--color-border-light); color: var(--color-text-tertiary); font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .05em; }
.domo-table td { padding: var(--spacing-2); border-bottom: 1px solid var(--color-border-light); }
.domo-table td .form-control { min-width: 74px; padding: 6px var(--spacing-2); font-size: var(--font-size-xs); }
.domo-table td:nth-child(2) .form-control { min-width: 140px; }

@media (max-width: 1023px) {
  .domo-cards, .domo-charts, .domo-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .domo-cycle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .domo-status-strip, .domo-cards, .domo-charts, .domo-config-grid { grid-template-columns: 1fr; }
  .domo-output { flex-wrap: wrap; }
}

.domo-big small { margin-left: 4px; color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-weight: 600; }
.domo-weight-detail { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.domo-output.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.domo-output-actions { display: flex; gap: var(--spacing-2); margin-left: auto; flex-wrap: wrap; }
.domo-chart-card .card-body { display: flex; flex-direction: column; gap: var(--spacing-2); }

.domo-profile-preview { display: flex; flex-direction: column; gap: var(--spacing-2); border: 1px dashed var(--color-border-light); border-radius: var(--radius-md); padding: var(--spacing-3); }
.domo-preview-description { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.domo-preview-targets { display: flex; gap: var(--spacing-3); flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.domo-preview-phases { display: flex; flex-direction: column; }
.domo-preview-phase { display: grid; grid-template-columns: 22px minmax(110px, auto) minmax(0, 1fr); gap: var(--spacing-2); align-items: baseline; padding: var(--spacing-1) 0; border-top: 1px solid var(--color-border-light); font-size: var(--font-size-xs); }
.domo-preview-phase-num { color: var(--color-text-tertiary); font-weight: 700; text-align: right; }
.domo-preview-phase-detail { color: var(--color-text-secondary); text-align: right; }

/* =========================================================
   LA CAVE — Immersive Homepage
   ========================================================= */

.cave-scene {
  position: relative;
  min-height: calc(100vh - var(--header-height) - var(--spacing-12));
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cave-scene__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.cave-scene__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-8);
  pointer-events: none;
}

.cave-scene__title {
  margin: 0 0 var(--spacing-6);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Overlays positionnés absolument par rapport à l'image */
.cave-overlay {
  position: absolute;
  pointer-events: auto;
  background: rgba(15, 12, 8, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4) var(--spacing-5);
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: all var(--transition-normal);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cave-overlay:hover {
  background: rgba(20, 16, 12, 0.7);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cave-overlay__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-2);
}

.cave-overlay__value {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  margin-bottom: var(--spacing-1);
  letter-spacing: -0.02em;
}

.cave-overlay__value small {
  font-size: 0.45em;
  font-weight: var(--font-weight-normal);
  opacity: 0.75;
  margin-left: 2px;
}

.cave-overlay__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: 0.8;
  margin-bottom: var(--spacing-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cave-overlay__target {
  font-size: var(--font-size-xs);
  opacity: 0.6;
  font-weight: var(--font-weight-medium);
}

.cave-overlay__cycle-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-3);
  opacity: 0.95;
}

.cave-overlay__cycle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

.cave-overlay__cycle-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.cave-overlay__cycle-meta-label {
  opacity: 0.65;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cave-overlay__cycle-meta-value {
  font-weight: var(--font-weight-semibold);
}

.cave-overlay__equip-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.cave-overlay__equip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--transition-fast);
}

.cave-overlay__equip-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.cave-overlay__equip-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  opacity: 0.9;
}

.cave-overlay__equip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.cave-overlay__equip-dot--on {
  background: var(--color-success);
  box-shadow: 0 0 10px var(--color-success);
}

.cave-overlay__equip-dot--off {
  background: var(--color-text-muted);
}

.cave-overlay__equip-state {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  letter-spacing: 0.03em;
}

.cave-overlay__equip-state--on {
  background: rgba(22, 163, 74, 0.25);
  color: var(--color-success-light);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.3);
}

.cave-overlay__equip-state--off {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-tertiary);
}

.cave-overlay__conn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  opacity: 0.85;
  padding: var(--spacing-2) var(--spacing-4);
}

.cave-overlay__conn-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.cave-overlay__conn-dot--ok {
  background: var(--color-success);
  box-shadow: 0 0 10px var(--color-success);
}

.cave-overlay__conn-dot--warn {
  background: var(--color-warning);
  box-shadow: 0 0 10px var(--color-warning);
}

.cave-overlay__conn-dot--ko {
  background: var(--color-danger);
  box-shadow: 0 0 10px var(--color-danger);
}

.cave-scene__alerts {
  position: absolute;
  bottom: var(--spacing-6);
  left: var(--spacing-6);
  right: var(--spacing-6);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  pointer-events: auto;
}

.cave-alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  animation: caveAlertIn 0.3s ease;
}

.cave-alert--warning {
  border-left: 4px solid var(--color-warning);
}

.cave-alert--danger {
  border-left: 4px solid var(--color-danger);
}

.cave-alert--info {
  border-left: 4px solid var(--color-info);
}

@keyframes caveAlertIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 1023px) {
  .cave-scene__overlay {
    padding: var(--spacing-5);
  }

  .cave-overlay {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100%;
  }

  .cave-scene__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
  }

  .cave-overlay--temp { order: 1; }
  .cave-overlay--hum { order: 2; }
  .cave-overlay--cycle { order: 3; }
  .cave-overlay--equip { order: 4; }
  .cave-overlay--conn { order: 5; }

  .cave-scene__title { font-size: var(--font-size-3xl); }
  .cave-overlay { padding: var(--spacing-3) var(--spacing-4); }
  .cave-overlay__value { font-size: clamp(1.5rem, 4vw, 2rem); }
  .cave-overlay__cycle-meta { gap: var(--spacing-2) var(--spacing-4); }
  .cave-scene__alerts { position: relative; bottom: auto; left: auto; right: auto; transform: none; width: 100%; max-width: none; margin-top: var(--spacing-4); }
}

@media (max-width: 639px) {
  .cave-scene__overlay {
    padding: var(--spacing-3);
  }

  .cave-scene__title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-3); }
  .cave-overlay { padding: var(--spacing-3); }
  .cave-overlay__value { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .cave-overlay__icon { width: 36px; height: 36px; font-size: var(--font-size-lg); }
  .cave-overlay__equip-item { font-size: var(--font-size-xs); padding: var(--spacing-1) var(--spacing-2); }
  .cave-overlay__equip-name small { display: none; }
  .cave-overlay__conn { font-size: var(--font-size-xs); }
}

/* =========================================================
   AI SETTINGS PAGE — configuration assistant IA
   ========================================================= */
.ai-settings-page { display: flex; flex-direction: column; gap: var(--spacing-5); max-width: 960px; }
.ai-settings-page > form { display: flex; flex-direction: column; gap: var(--spacing-5); }

/* En-tête de carte avec description */
.ai-settings-page .card-header > div { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
.ai-settings-page .card-header h2 { margin: 0; }
.ai-settings-page .card-header .text-muted { margin: 0; font-size: var(--font-size-sm); }

/* Carte fournisseur : bascule dans l'en-tête */
.ai-provider-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.ai-provider-toggle { flex-shrink: 0; white-space: nowrap; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.ai-provider-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); }

/* Corps fournisseur : grille 2 colonnes */
.ai-provider-body { display: flex; flex-direction: column; gap: var(--spacing-4); }

/* Infobulles sur les labels de formulaire */
.ai-settings-page label[data-tooltip] { cursor: help; }

/* Actions : bouton + message */
.ai-form-actions { align-items: center; }
.ai-form-actions [data-ai-message] { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .ai-settings-page { gap: var(--spacing-4); }
  .ai-settings-page > form { gap: var(--spacing-4); }
  .ai-provider-card .card-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); }
  .ai-form-actions { flex-direction: column; align-items: stretch; }
  .ai-form-actions .btn { width: 100%; min-height: 44px; }
  .ai-form-actions [data-ai-message] { text-align: center; }
}

@media (max-width: 480px) {
  .ai-settings-page .card-body { padding: var(--spacing-4); }
  .ai-settings-page .card-header { padding: var(--spacing-4); }
  .ai-settings-page .form-row { gap: var(--spacing-3); }
}

/* =========================================================
   AI ASSISTANT — mode Assistant / Développement + actions
   ========================================================= */
.ai-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.ai-mode-switch {
  display: inline-flex;
  gap: var(--spacing-1);
  padding: 3px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-bg-tertiary);
}

.ai-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ai-mode-btn:hover {
  color: var(--color-text-primary);
}

.ai-mode-btn--active {
  background: var(--color-surface-raised);
  border-color: var(--color-border-light);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.ai-mode-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

.ai-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.ai-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-1) var(--spacing-4);
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.ai-status-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}

.ai-status-label {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-status-muted {
  color: var(--color-text-muted);
}

.ai-status-title {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-tertiary);
}

.ai-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.ai-status-badge.is-running {
  background: var(--color-info-light);
  color: var(--color-info-hover);
}

.ai-status-badge.is-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.ai-status-badge.is-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.ai-status-badge.is-pending {
  background: var(--color-warning-light);
  color: var(--color-warning-hover);
}

.ai-status-badge.is-muted {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.ai-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.ai-action-buttons[hidden] {
  display: none !important;
}

.ai-action-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.ai-action-status--success { color: var(--color-success); }
.ai-action-status--error { color: var(--color-danger); }
.ai-action-status--muted { color: var(--color-text-muted); }

.ai-model-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px var(--spacing-2);
  border-radius: 999px;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   AI Assistant - New Clean Layout
   ============================================================ */

.ai-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

.ai-sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
}

.ai-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-sidebar-header h3 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.ai-conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-2);
  min-height: 0;
}

.conversation-item {
  position: relative;
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: var(--spacing-1);
  transition: background-color 0.15s, transform 0.2s ease;
  overflow: hidden;
}

.conversation-item:hover {
  background: var(--color-bg-tertiary);
}

.conversation-item.swipe-open {
  background: var(--color-danger-light);
}

.conversation-item--active {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
}

.conversation-content {
  display: flex;
  flex-direction: column;
  z-index: 1;
  transition: transform 0.2s ease;
}

.conversation-item.swipe-open .conversation-content {
  transform: translateX(-80px);
}

.conversation-delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: var(--color-white);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background-color 0.2s;
  z-index: 2;
}

/* La suppression n'apparaît qu'après un swipe vers la gauche. */
.conversation-item.swipe-open .conversation-delete-btn {
  opacity: 1;
  pointer-events: auto;
}

.conversation-delete-btn:hover {
  background: var(--color-danger-hover);
}

.conversation-delete-btn svg {
  width: 24px;
  height: 24px;
}

.conversation-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
}

.conversation-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-primary);
}

.ai-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.ai-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.ai-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

.ai-mode-switch {
  display: inline-flex;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 3px;
}

.ai-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 120px;
}

.ai-mode-btn:hover {
  color: var(--color-text-primary);
}

.ai-mode-btn--active {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.ai-mode-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ai-config-section-wrapper {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.ai-config-details {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.ai-config-summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
}

.ai-config-summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.ai-config-summary span { transition: transform var(--transition-fast); }
.ai-config-summary.is-open span { transform: rotate(180deg); }
.ai-config-details .ai-config-section { border: 0; border-top: 1px solid var(--color-border-light); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.ai-config-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.ai-config-title {
  margin: 0 0 var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.ai-config-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ai-config-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.ai-config-select {
  height: 44px;
  padding: 0 var(--spacing-3);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.ai-config-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ai-current-usage {
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.ai-current-usage--empty {
  opacity: 0.7;
}

.ai-current-usage-header {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-4);
}

.ai-current-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.ai-current-usage-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.ai-current-usage-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ai-current-usage-value {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-mono);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
}

.ai-current-usage-fallback {
  margin-top: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.ai-fallback-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-weight: 500;
  color: var(--color-warning);
}

.ai-current-usage--empty .ai-current-usage-value {
  color: var(--color-text-tertiary);
}

.ai-dev-actions {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.ai-dev-actions .btn {
  min-height: 40px;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.ai-dev-actions[hidden] {
  display: none;
}

.ai-dev-status {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.ai-dev-status[hidden] {
  display: none;
}

.ai-dev-live {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding-top: var(--spacing-2);
  border-top: 1px dashed var(--color-border-light);
}

.ai-dev-live-line {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  line-height: 1.5;
  word-break: break-word;
}

.ai-conversation-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-height: 0;
}

.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--color-text-tertiary);
  padding: var(--spacing-8);
}

.ai-welcome-icon {
  margin-bottom: var(--spacing-4);
  color: var(--color-primary);
  opacity: 0.6;
}

.ai-welcome h3 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.ai-welcome p {
  margin: 0 0 var(--spacing-4);
  max-width: 400px;
  line-height: 1.5;
}

.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  justify-content: center;
}

.ai-suggestion-btn {
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-suggestion-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ai-message {
  display: flex;
  gap: var(--spacing-3);
  max-width: 85%;
}

.ai-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message--assistant {
  align-self: flex-start;
}

.ai-message-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.ai-message--user .ai-message-avatar {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.ai-message-content {
  flex: 1;
  min-width: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  max-width: 100%;
}

.ai-message--user .ai-message-content {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.ai-message-text {
  color: var(--color-text-primary);
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ai-message--user .ai-message-text {
  color: var(--color-white);
}

.ai-message-model {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.ai-message-agent {
  font-weight: 600;
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
}

.ai-message--user .ai-message-model {
  color: rgba(255, 255, 255, 0.7);
}

.ai-message--user .ai-message-agent {
  color: rgba(255, 255, 255, 0.9);
}

.ai-message-time {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: right;
}

.ai-message--user .ai-message-time {
  color: rgba(255, 255, 255, 0.5);
}

.ai-input-footer {
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.ai-input-area {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-end;
  max-width: 100%;
}

.ai-input {
  flex: 1;
  min-height: 44px;
  max-height: 200px;
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  resize: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ai-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ai-input::placeholder {
  color: var(--color-text-tertiary);
}

.ai-send-btn {
  flex-shrink: 0;
  min-width: 100px;
  height: 44px;
  padding: 0 var(--spacing-5);
  font-weight: 600;
  border-radius: var(--radius-lg);
  white-space: nowrap;
}

.ai-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-dev-actions {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  flex-wrap: wrap;
  align-items: center;
}

.ai-dev-actions .btn {
  min-height: 40px;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .ai-layout {
    flex-direction: column;
  }

  /* Mobile : on réduit fortement tout le "chrome" (liste de conversations,
     titre, sélecteurs, barre de saisie) pour privilégier la conversation. */
  .ai-sidebar {
    width: 100%;
    height: auto;
    max-height: 152px;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
  }

  .ai-sidebar-header {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-sidebar-header h3 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ai-sidebar-header .btn {
    min-height: 30px;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  .ai-conversations-list {
    max-height: 112px;
    padding: var(--spacing-1) var(--spacing-2);
  }

  .conversation-item {
    padding: var(--spacing-2) var(--spacing-3);
    min-height: 40px;
  }

  .conversation-meta {
    margin-top: 0;
  }

  .ai-header {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-header-main {
    flex-wrap: nowrap;
    gap: var(--spacing-2);
  }

  .ai-title {
    font-size: var(--font-size-base);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-mode-switch {
    width: auto;
    flex-shrink: 0;
    justify-content: flex-end;
    padding: 2px;
  }

  .ai-mode-btn {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  .ai-config-section-wrapper {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-config-section {
    padding: var(--spacing-2);
    background: transparent;
    border: none;
  }

  .ai-config-title {
    display: none;
  }

  .ai-config-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    margin-bottom: 0;
  }

  .ai-config-label {
    font-size: var(--font-size-xs);
  }

  .ai-config-select {
    height: 36px;
    padding: 0 var(--spacing-2);
    font-size: var(--font-size-base);
  }

  .ai-current-usage-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }

  .ai-dev-actions {
    flex-direction: row;
    width: auto;
    padding: var(--spacing-2) var(--spacing-3);
    gap: var(--spacing-2);
  }

  .ai-dev-actions .btn {
    width: auto;
    min-height: 34px;
    padding: var(--spacing-1) var(--spacing-3);
  }

  .ai-dev-status {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-messages {
    padding: var(--spacing-3);
    gap: var(--spacing-2);
  }

  .ai-message {
    max-width: 95%;
  }

  .ai-input-footer {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-input-area {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-2);
    padding: 0;
  }

  .ai-input {
    width: auto;
    min-height: 40px;
    max-height: 120px;
    font-size: 16px;
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-input-area .ai-send-btn {
    width: auto;
    min-width: 76px;
    min-height: 40px;
    height: 40px;
    padding: 0 var(--spacing-3);
    font-size: var(--font-size-sm);
  }
}

/* Écrans courts (iPhone SE / mini) : on réduit encore la liste de
   conversations pour conserver de la place à la discussion. */
@media (max-width: 768px) and (max-height: 700px) {
  .ai-sidebar {
    max-height: 112px;
  }

  .ai-conversations-list {
    max-height: 72px;
  }
}

@media (max-width: 480px) {
  .ai-header {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-config-section {
    padding: var(--spacing-2);
  }

  .ai-message {
    max-width: 95%;
  }

  .ai-input-footer {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .ai-input-area {
    gap: var(--spacing-2);
  }

  .ai-input-area .ai-send-btn {
    min-height: 40px;
    height: 40px;
  }
}

/* Group section separator rows - fond bleu complet, titre x2, compteur entre () en blanc */
/* Séparateurs d'équipe : bandeau vertical coloré avec nom d'équipe. */
.agenda-team-cell { width: 28px; min-width: 28px; max-width: 32px; padding: var(--spacing-2) 0; text-align: center; vertical-align: middle; border-left: 4px solid transparent; position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--color-border-light); }
.agenda-team-name { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.agenda-team-head { background: var(--color-bg-secondary); position: sticky; left: 0; top: 0; z-index: 7; }
.agenda-person-head { border-left: 0; }
.agenda-team-0 .agenda-team-cell { background: var(--color-primary); border-left-color: var(--color-primary-dark); }
.agenda-team-1 .agenda-team-cell { background: #15803d; border-left-color: #166534; }
.agenda-team-2 .agenda-team-cell { background: #b45309; border-left-color: #92400e; }
.agenda-team-3 .agenda-team-cell { background: #0369a1; border-left-color: #075985; }
.agenda-team-4 .agenda-team-cell { background: #b91c1c; border-left-color: #991b1b; }
.agenda-team-5 .agenda-team-cell { background: #7c3aed; border-left-color: #6d28d9; }

/* =========================================================
   SOUVENIRS — diaporama plein écran (photos + musique libre)
   ========================================================= */
.souvenirs-page { display: flex; flex-direction: column; gap: var(--spacing-4); }
.souvenirs-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.souvenirs-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 220px; padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-surface-raised); cursor: pointer; }
.souvenirs-chip.is-current { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.souvenirs-chip-kind { color: var(--color-text-secondary); font-size: var(--font-size-xs); letter-spacing: .04em; text-transform: uppercase; }
.souvenirs-chip-title { max-width: 100%; color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.souvenirs-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; overflow: hidden; border-radius: var(--radius-lg); background: #0b0b0f; outline: none; }
.souvenirs-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.souvenirs-layer.is-active { opacity: 1; }
.souvenirs-photo { width: 100%; height: 100%; object-fit: contain; }
.souvenirs-photo.kb-1 { animation: souvenirsKb1 var(--slide-ms, 6000ms) linear forwards; }
.souvenirs-photo.kb-2 { animation: souvenirsKb2 var(--slide-ms, 6000ms) linear forwards; }
.souvenirs-photo.kb-3 { animation: souvenirsKb3 var(--slide-ms, 6000ms) linear forwards; }
.souvenirs-photo.kb-4 { animation: souvenirsKb4 var(--slide-ms, 6000ms) linear forwards; }
.souvenirs-photo.kb-5 { animation: souvenirsKb5 var(--slide-ms, 6000ms) ease-in-out forwards; }
.souvenirs-photo.kb-6 { animation: souvenirsKb6 var(--slide-ms, 6000ms) ease-in-out forwards; }
@keyframes souvenirsKb1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1) translate(-1.5%, -1%); } }
@keyframes souvenirsKb2 { from { transform: scale(1) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes souvenirsKb3 { from { transform: scale(1) translate(1%, -1%); } to { transform: scale(1) translate(-1%, 1%); } }
@keyframes souvenirsKb4 { from { transform: scale(1) translate(-1%, 1%); } to { transform: scale(1) translate(1%, -1%); } }
@keyframes souvenirsKb5 { from { transform: scale(1); } to { transform: scale(.96); } }
@keyframes souvenirsKb6 { from { transform: scale(.96); } to { transform: scale(1); } }

/* Transitions d'entrée entre deux photos (classe fx-* posée au hasard).
   Le couple scale(<1) + translation garantit que la photo reste entière :
   la marge créée par le scale absorbe le décalage, aucun visage n'est rogné. */
.souvenirs-layer.fx-fade { transition: opacity 1.2s ease; }
.souvenirs-layer.fx-slide { transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1); transform: scale(.95) translateX(1%); }
.souvenirs-layer.fx-slide.is-active { transform: scale(1) translateX(0); }
.souvenirs-layer.fx-rise { transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1); transform: scale(.96) translateY(1%); }
.souvenirs-layer.fx-rise.is-active { transform: scale(1) translateY(0); }
.souvenirs-layer.fx-zoom { transition: opacity .9s ease, transform 1.4s ease-out; transform: scale(.94); }
.souvenirs-layer.fx-zoom.is-active { transform: scale(1); }
.souvenirs-layer.fx-blur { transition: opacity .8s ease, filter 1.2s ease-out; filter: blur(18px); }
.souvenirs-layer.fx-blur.is-active { filter: blur(0); }

/* Ambiances : effets visuels appliqués aux photos + voile coloré du stage. */
.souvenirs-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background .6s ease; }
.souvenirs-amb-douce .souvenirs-photo { filter: saturate(1.05) contrast(1.02) brightness(1.03); }
.souvenirs-amb-douce::before { background: radial-gradient(ellipse at center, transparent 55%, rgba(40,24,10,.28) 100%); }
.souvenirs-amb-nostalgie .souvenirs-photo { filter: sepia(.55) saturate(.75) contrast(1.05) brightness(.97); }
.souvenirs-amb-nostalgie::before { background: radial-gradient(ellipse at center, transparent 50%, rgba(30,18,6,.45) 100%); }
.souvenirs-amb-energie .souvenirs-photo { filter: saturate(1.45) contrast(1.1) brightness(1.05); }
.souvenirs-amb-energie::before { background: radial-gradient(ellipse at center, transparent 60%, rgba(120,40,0,.22) 100%); }
.souvenirs-amb-voyage .souvenirs-photo { filter: saturate(1.15) sepia(.15) contrast(1.03) brightness(1.02) hue-rotate(-8deg); }
.souvenirs-amb-voyage::before { background: radial-gradient(ellipse at center, transparent 50%, rgba(60,30,8,.35) 100%); }
.souvenirs-amb-mystere .souvenirs-photo { filter: saturate(.7) contrast(1.12) brightness(.9) hue-rotate(12deg); }
.souvenirs-amb-mystere::before { background: radial-gradient(ellipse at center, transparent 40%, rgba(4,10,24,.55) 100%); }
.souvenirs-dots { position: absolute; top: var(--spacing-3); right: var(--spacing-3); z-index: 2; display: flex; gap: 4px; }
.souvenirs-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: rgba(255,255,255,.35); }
.souvenirs-dot.is-seen { background: rgba(255,255,255,.7); }
.souvenirs-dot.is-current { background: #fff; }
.souvenirs-controls { position: absolute; left: 50%; bottom: var(--spacing-3); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-full); background: rgba(15,15,20,.72); backdrop-filter: blur(6px); opacity: 0; transform: translateX(-50%); transition: opacity .2s ease; }
.souvenirs-stage:hover .souvenirs-controls, .souvenirs-stage:focus-within .souvenirs-controls { opacity: 1; }
.souvenirs-control { display: flex; align-items: center; gap: 6px; color: #fff; font-size: var(--font-size-xs); }
.souvenirs-control input[type="range"] { width: 90px; }
.souvenirs-empty:not([hidden]) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-6); color: #fff; text-align: center; }
.souvenirs-help, .souvenirs-credits { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.souvenirs-credits a { color: var(--color-text-tertiary); }
.souvenirs-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.souvenirs-stage:fullscreen .souvenirs-controls { opacity: .2; }
.souvenirs-stage:fullscreen:hover .souvenirs-controls { opacity: 1; }
@media (max-width: 768px) {
  .souvenirs-stage { aspect-ratio: 4 / 3; max-height: 60vh; }
  .souvenirs-controls { position: static; opacity: 1; transform: none; background: transparent; backdrop-filter: none; padding: 0; }
  .souvenirs-control { color: var(--color-text-secondary); }
}
@media (prefers-reduced-motion: reduce) {
  .souvenirs-photo { animation: none !important; }
  .souvenirs-layer { transform: none !important; filter: none !important; transition: opacity .6s ease !important; }
}
.intendance-dashboard-page .date-range-sliders input:first-child { pointer-events: none; }
.intendance-dashboard-page .date-range-sliders input::-webkit-slider-thumb,
.intendance-dashboard-page .date-range-sliders input::-moz-range-thumb { pointer-events: auto; }
.intendance-dashboard-page .date-range-sliders { isolation: isolate; }
.intendance-dashboard-page .date-range-sliders::before { z-index: 0; }
.intendance-dashboard-page .date-range-sliders input { position: relative; appearance: none; -webkit-appearance: none; background: transparent; }
.intendance-dashboard-page .date-range-sliders input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: transparent; }
.intendance-dashboard-page .date-range-sliders input::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: transparent; }
.intendance-dashboard-page .date-range-sliders input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; border: 2px solid var(--color-primary); border-radius: var(--radius-full); background: var(--color-surface-raised); cursor: grab; }
.intendance-dashboard-page .date-range-sliders input::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--color-primary); border-radius: var(--radius-full); background: var(--color-surface-raised); cursor: grab; }
.intendance-dashboard-page .filter-group select[multiple] { min-height: 96px; }
.intendance-dashboard-page .intendance-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-3); margin-top: var(--spacing-4); }
.intendance-dashboard-page .intendance-kpi-card { display: flex; flex-direction: column; gap: var(--spacing-1); padding: var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.intendance-dashboard-page .intendance-kpi-card span, .intendance-dashboard-page .intendance-kpi-card small { color: var(--color-text-secondary); font-size: var(--font-size-sm); }.intendance-dashboard-page .intendance-kpi-card strong { color: var(--color-text-primary); font-size: var(--font-size-lg); }
.intendance-dashboard-page .intendance-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4); margin-top: var(--spacing-4); }.intendance-dashboard-page .intendance-dashboard-grid h2, .intendance-dashboard-page .intendance-summary h2 { margin-top: 0; font-size: var(--font-size-lg); }
.intendance-dashboard-page .chart-card--monthly { grid-column: 1 / -1; }
.intendance-dashboard-page .intendance-bar-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(80px, 2fr) auto auto; align-items: center; gap: var(--spacing-2); width: 100%; padding: var(--spacing-2) 0; border: 0; border-bottom: 1px solid var(--color-border-light); background: transparent; color: var(--color-text-primary); text-align: left; }.intendance-dashboard-page button.intendance-bar-row { cursor: pointer; }.intendance-dashboard-page .intendance-bar-row i { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-tertiary); }.intendance-dashboard-page .intendance-bar-row b { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }.intendance-dashboard-page .intendance-bar-row small { color: var(--color-text-secondary); }
.intendance-dashboard-page .intendance-summary { margin-top: var(--spacing-4); }.intendance-dashboard-page #monthly-chart { display: block; width: 100%; height: 300px; }
.intendance-dashboard-page .intendance-expense-list { margin-top: var(--spacing-4); }.intendance-dashboard-page .intendance-expense-list .users-table { min-width: 900px; }.intendance-dashboard-page .intendance-expense-list .action-buttons { white-space: nowrap; }
@media (max-width: 900px) { .intendance-dashboard-page .intendance-dashboard-grid { grid-template-columns: 1fr; } }
.intendance-dashboard-page .chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.intendance-dashboard-page .dashboard-filters { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-3); }.intendance-dashboard-page .dashboard-filters-row { display: grid; align-items: end; gap: var(--spacing-4); }.intendance-dashboard-page .dashboard-filters-row--top { grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); }.intendance-dashboard-page .dashboard-filters-row--bottom { grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) auto; }.intendance-dashboard-page .dashboard-filters-row .filter-group { min-width: 0; width: 100%; }
.intendance-dashboard-page .dashboard-filters-row--top { grid-template-columns: 1fr; }.intendance-dashboard-page .dashboard-filters-row--bottom { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }.intendance-dashboard-page .dashboard-multi-filter { position: relative; }.intendance-dashboard-page .dashboard-multi-filter summary { min-height: var(--input-height); padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-border-medium); border-radius: var(--control-radius); background: var(--color-surface-raised); color: var(--color-text-primary); cursor: pointer; list-style: none; }.intendance-dashboard-page .dashboard-multi-filter summary::-webkit-details-marker { display: none; }.intendance-dashboard-page .dashboard-multi-filter summary::after { float: right; content: '▾'; color: var(--color-text-tertiary); }.intendance-dashboard-page .dashboard-multi-filter[open] summary { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }.intendance-dashboard-page .dashboard-multi-filter-menu { position: absolute; top: calc(100% + var(--spacing-1)); left: 0; right: 0; z-index: var(--z-index-dropdown, 20); display: grid; max-height: 240px; overflow-y: auto; padding: var(--spacing-2); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); }.intendance-dashboard-page .dashboard-multi-filter-menu label { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2); color: var(--color-text-primary); cursor: pointer; }.intendance-dashboard-page .dashboard-multi-filter-menu label:hover { background: var(--color-bg-tertiary); }
.intendance-dashboard-page .chart-heading h2 { margin: 0; }.intendance-dashboard-page .chart-heading p { margin: var(--spacing-1) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.intendance-dashboard-page .chart-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }.intendance-dashboard-page .chart-legend-item { display: inline-flex; align-items: center; gap: var(--spacing-1); white-space: nowrap; }.intendance-dashboard-page .chart-swatch { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--radius-full); }.intendance-dashboard-page .chart-swatch--primary { background: var(--color-primary); }.intendance-dashboard-page .chart-swatch--category { background: #7c3aed; }.intendance-dashboard-page .chart-swatch--user { background: #059669; }
.intendance-dashboard-page .intendance-bar-label { display: inline-flex; align-items: center; min-width: 0; gap: var(--spacing-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.intendance-dashboard-page .intendance-bar-track { height: 10px !important; background: var(--color-bg-tertiary) !important; }.intendance-dashboard-page .intendance-bar-row:hover, .intendance-dashboard-page .intendance-bar-row:focus-visible { background: var(--color-bg-tertiary); }
@media (max-width: 720px) { .intendance-dashboard-page .chart-heading { flex-direction: column; }.intendance-dashboard-page .intendance-bar-row { grid-template-columns: minmax(100px, 1fr) minmax(50px, 1.2fr) auto; }.intendance-dashboard-page .intendance-bar-row small { display: none; }.intendance-dashboard-page .intendance-bar-row strong { font-size: var(--font-size-xs); } }
.intendance-dashboard-page .date-range-inputs { flex-wrap: nowrap; }.intendance-dashboard-page .date-range-inputs .form-input { min-width: 0; flex: 1 1 0; width: 0; }

.surveillance-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--spacing-3); margin-bottom:var(--spacing-4); }
.surveillance-kpis > div { display:flex; flex-direction:column; gap:var(--spacing-1); padding:var(--spacing-4); border:1px solid var(--color-border-light); border-radius:var(--radius-lg); background:var(--color-surface-raised); }
.surveillance-kpis strong { font-size:var(--font-size-2xl); color:var(--color-text-primary); }.surveillance-kpis span { color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.surveillance-card { margin-bottom:var(--spacing-4); }.surveillance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--spacing-4); }
.surveillance-camera { min-width:0; padding:var(--spacing-3); border:1px solid var(--color-border-light); border-radius:var(--radius-lg); background:var(--color-bg-primary); }
.surveillance-preview { display:flex; align-items:center; justify-content:center; min-height:150px; margin-bottom:var(--spacing-3); border-radius:var(--radius-md); background:var(--color-bg-tertiary); color:var(--color-text-tertiary); font-size:var(--font-size-sm); }
.surveillance-video { width:100%; height:100%; min-height:150px; object-fit:cover; display:block; background:#000; }
.surveillance-image { width:100%; min-height:150px; object-fit:cover; display:block; background:#000; }
.surveillance-camera-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--spacing-2); }.surveillance-camera h3 { margin:0; font-size:var(--font-size-base); }.surveillance-camera p { margin:var(--spacing-1) 0; }
.surveillance-status { padding:2px var(--spacing-2); border-radius:var(--radius-full); font-size:var(--font-size-xs); }.surveillance-status.is-online { background:var(--color-success-light); color:var(--color-success); }.surveillance-status.is-offline,.surveillance-status.is-error { background:var(--color-danger-light); color:var(--color-danger); }.surveillance-status.is-unknown { background:var(--color-bg-tertiary); color:var(--color-text-tertiary); }
.surveillance-actions { display:flex; flex-wrap:wrap; gap:var(--spacing-2); margin-top:var(--spacing-3); }
.surveillance-camera-modal { width:min(760px, calc(100vw - 32px)); max-height:90vh; overflow:auto; }
.surveillance-tabs { display:flex; gap:var(--spacing-2); margin-bottom:var(--spacing-4); border-bottom:1px solid var(--color-border-light); }
.surveillance-tabs .admin-tab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--color-text-secondary); cursor:pointer; padding:var(--spacing-2) var(--spacing-3); }
.surveillance-tabs .admin-tab.active { border-bottom-color:var(--color-primary); color:var(--color-primary); }
.surveillance-modal-panel { display:grid; gap:var(--spacing-4); }
.surveillance-modal-panel[hidden] { display:none; }
.surveillance-modal-panel .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-3); }
.surveillance-modal-panel label > span { display:block; margin-bottom:var(--spacing-1); color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.surveillance-modal-panel input:not([type="checkbox"]), .surveillance-modal-panel select { width:100%; min-height:var(--input-height); padding:var(--spacing-2) var(--spacing-3); border:1px solid var(--color-border-medium); border-radius:var(--control-radius); background:var(--color-surface-raised); color:var(--color-text-primary); }
.surveillance-modal-panel .checkbox-label { display:flex; align-items:center; gap:var(--spacing-2); color:var(--color-text-primary); }
@media (max-width:640px) { .surveillance-modal-panel .form-row { grid-template-columns:1fr; } .surveillance-tabs { overflow-x:auto; } }
@media (max-width:640px) { .surveillance-page .page-header { align-items:flex-start; flex-direction:column; gap:var(--spacing-3); }.surveillance-grid { grid-template-columns:1fr; }.surveillance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.intendance-dashboard-page .period-toolbar { flex-wrap: nowrap; gap: var(--spacing-1); }.intendance-dashboard-page .period-toolbar .form-input { min-width: 0; width: 125px; flex: 0 1 125px; padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.intendance-dashboard-page .dashboard-filters { margin-top: var(--spacing-4); }
@media (max-width: 720px) {
  .intendance-dashboard-page .dashboard-filters { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: var(--spacing-3); }
  .intendance-dashboard-page .dashboard-filters-row, .intendance-dashboard-page .dashboard-filters-row--top, .intendance-dashboard-page .dashboard-filters-row--bottom { grid-template-columns: 1fr; gap: var(--spacing-3); }
  .intendance-dashboard-page .dashboard-filters .filter-group, .intendance-dashboard-page .dashboard-filters .filter-group:first-child { min-width: 0; width: 100%; }
  .intendance-dashboard-page .date-range-values { flex-wrap: wrap; }.intendance-dashboard-page .date-range-values .form-input { min-width: 0; flex: 1 1 130px; width: 100%; }
  .intendance-dashboard-page .intendance-kpi-card { min-width: 0; }.intendance-dashboard-page .intendance-kpi-card strong { overflow-wrap: anywhere; }
  .intendance-dashboard-page .histogram-container { min-width: 0; overflow: hidden; padding: var(--spacing-3); }.intendance-dashboard-page .intendance-bar-row { grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.5fr); }.intendance-dashboard-page .intendance-bar-row strong, .intendance-dashboard-page .intendance-bar-row small { text-align: right; }
  .intendance-dashboard-page .table-container { max-width: 100%; overflow-x: auto; }.intendance-dashboard-page .users-table { min-width: 620px; }
}

/* Assistant IA — mise en page tablette (iPad portrait et paysage). */
@media (min-width: 769px) and (max-width: 1100px) {
  .ai-page { min-width: 0; }
  .ai-layout { flex-direction: column; }
  .ai-sidebar {
    width: 100%;
    height: auto;
    max-height: 148px;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
  }
  .ai-sidebar-header { padding: var(--spacing-3) var(--spacing-4); }
  .ai-conversations-list {
    display: flex;
    gap: var(--spacing-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--spacing-2) var(--spacing-3);
  }
  .conversation-item { flex: 0 0 min(260px, 42vw); margin-bottom: 0; }
  .ai-header,
  .ai-config-section-wrapper,
  .ai-input-footer { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
  .ai-header-main { align-items: flex-start; }
  .ai-mode-btn { min-width: 96px; padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
  .ai-config-grid { gap: var(--spacing-3); }
  .ai-config-section { padding: var(--spacing-4); }
  .ai-messages { padding: var(--spacing-4); }
  .ai-message { max-width: 92%; }
  .ai-input-area { gap: var(--spacing-2); }
  .ai-input { min-width: 0; }
  .ai-send-btn { min-width: 88px; padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
}

/* =========================================================
   RESPONSIVE — CORRECTIONS GLOBALES (PC / tablette / mobile)
   ========================================================= */

/* Calendrier maintenance : conteneur sans scroll horizontal */
[data-calendar],
[data-types-list] {
  overflow-x: auto;
  max-width: 100%;
}

/* Détails d'un bon de travail : grille 2 colonnes -> 1 colonne */
@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Barre de périodes (dashboard intendance) : autoriser le wrap */
@media (max-width: 720px) {
  .period-toolbar {
    flex-wrap: wrap;
  }
}

/* Barre de navigation calendrier : titre pleine largeur sur mobile */
@media (max-width: 639px) {
  .calendar-nav h2 {
    min-width: 0;
    flex: 1 1 100%;
    text-align: left;
  }
}

/* Filtres de pages : champs réduits à 100 % sur petit écran */
@media (max-width: 640px) {
  .equipment-page .page-filters .form-input,
  .maintenance-page .page-filters .form-input {
    min-width: 0;
    width: 100%;
  }

  .equipment-page .filter-group,
  .maintenance-page .page-filters .filter-group,
  .intendance-dashboard-page .filter-group {
    min-width: 0;
    flex: 1 1 100%;
  }

  .modal-body {
    padding: var(--spacing-4);
  }
}

/* Grille de cartes (modèles d'e-mails housing, ...) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

/* Pièces jointes contrats maintenance : colonnes list + actions */
.attachments-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-4);
  align-items: start;
}

.attachments-list-col {
  min-width: 0;
}

@media (max-width: 639px) {
  .attachments-layout {
    grid-template-columns: 1fr;
  }
}