/**
 * CRM MAINTENANCE V5 - MAIN STYLES COMPLÉMENTAIRES
 * Styles additionnels - Les thèmes sont dans themes.css
 * Ne pas écraser les styles de thème
 */

/* =============================================
  DOLIBARR SYNC - SEARCH RESULTS (Lisibilité)
  ============================================= */
.dolibarr-search-title {
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.dolibarr-search-list {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.dolibarr-client-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.dolibarr-client-body {
  flex: 1;
  min-width: 240px;
}

.dolibarr-client-title {
  margin: 0 0 0.35rem 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dolibarr-client-details {
  font-size: 0.95rem;
  line-height: 1.35;
}

.dolibarr-contracts {
  margin-top: 0.85rem;
}

.dolibarr-contracts-title {
  font-weight: 800;
}

.dolibarr-contracts-list {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dolibarr-contract-row {
  font-size: 0.95rem;
}

.dolibarr-contracts-empty {
  margin-top: 0.5rem;
}

.dolibarr-client-actions {
  margin-left: 1rem;
}

/* =============================================
   OFFLINE BANNER
   ============================================= */
.offline-banner {
  background: #f59e0b;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1000;
  text-align: center;
  justify-content: center;
}

/* =============================================
   UTILITIES COMPLÉMENTAIRES
   ============================================= */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* =============================================
   TABLEAUX STANDARDISÉS - STYLE COHÉRENT
   ============================================= */
table {
  font-size: 0.875rem !important;
  border-collapse: collapse !important;
}

table thead tr {
  background: var(--gray-100) !important;
  border-bottom: 2px solid var(--gray-300) !important;
}

table thead th {
  padding: 8px 10px !important;
  text-align: left !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

table tbody td {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Boutons dans tableaux - taille réduite */
table .btn-sm {
  padding: 0.375rem 0.625rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}

table .btn-sm span {
  font-size: 0.875rem !important;
}

/* Badges dans tableaux */
table .badge {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
}

/* Select dans tableaux */
table select {
  padding: 4px 6px !important;
  font-size: 0.8125rem !important;
  border-radius: 4px !important;
}

/* Grid layouts */
.grid {
  display: grid;
  gap: 1rem;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Loading states */
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* =============================================
   RESPONSIVE MOBILE - CORRECTIONS GÉNÉRALES
   ============================================= */
@media (max-width: 768px) {
  /* Container et padding */
  .container {
    padding: 0.75rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Header responsive */
  .header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
  }
  
  .header h1 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .header > div {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  
  .header .btn {
    width: 100% !important;
    min-width: auto !important;
    margin: 0 !important;
  }
  
  /* Cards responsive */
  .card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  .card h2 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
  
  .card h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Buttons responsive */
  .btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.9375rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  
  .btn-sm {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    min-height: 36px !important;
  }
  
  /* Forms responsive */
  .form-input,
  .form-select,
  textarea.form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
  }
  
  /* Tables responsive */
  table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Grids responsive */
  .stats-grid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Flex containers responsive */
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  
  /* Text overflow */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Prevent horizontal scroll */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  #app {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* =============================================
   RESPONSIVE MOBILE - DASHBOARD SPECIFIQUE
   ============================================= */
@media (max-width: 768px) {
  /* Performance techniciens cards */
  .card [style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .card [style*="min-width: 180px"],
  .card [style*="min-width: 200px"] {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  /* Performance techniciens - force colonne */
  .card > div > div[style*="display: flex"][style*="justify-content: space-between"],
  .card [style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  
  /* Divs avec min-width dans les cards - force full width */
  .card [style*="min-width: 180px"],
  .card [style*="min-width: 200px"],
  .card [style*="flex: 1"][style*="min-width"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  /* Divs avec text-align right - force left et full width sur mobile */
  .card [style*="text-align: right"],
  .mobile-full-width {
    text-align: left !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  /* Grids dans cards - single column (sauf tasks grid) */
  .card [style*="display: grid"]:not(.tasks-grid):not(#tasksGridDashboard):not([id="tasksGridDashboard"]):not(.tasks-container *),
  .card [style*="grid-template-columns"]:not(.tasks-grid):not(#tasksGridDashboard):not([id="tasksGridDashboard"]):not(.tasks-container *) {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* EXCEPTION ABSOLUE pour tasks grid - même dans .card - PRIORITÉ MAXIMALE */
  .card #tasksGridDashboard,
  .card .tasks-grid,
  .card [id="tasksGridDashboard"],
  .tasks-container #tasksGridDashboard,
  .tasks-container .tasks-grid,
  .tasks-container [id="tasksGridDashboard"],
  .tasks-container #tasksGridDashboard.tasks-grid,
  .tasks-container .tasks-grid#tasksGridDashboard {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Exception: Dashboard tasks grid reste en 2 colonnes même sur mobile - PRIORITÉ MAXIMALE */
  #tasksGridDashboard,
  .tasks-grid,
  div#tasksGridDashboard,
  [id="tasksGridDashboard"],
  .card #tasksGridDashboard,
  .tasks-container #tasksGridDashboard,
  [style*="background: #0b1220"] #tasksGridDashboard,
  [style*="background: #0b1220"] div#tasksGridDashboard,
  [style*="display: grid"][id="tasksGridDashboard"],
  [style*="grid-template-columns"][id="tasksGridDashboard"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
  }
  
  /* Force les colonnes enfants à ne pas dépasser */
  #tasksGridDashboard > div,
  .tasks-grid > div,
  .tasks-col-left,
  .tasks-col-right,
  div#tasksGridDashboard > div {
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 50% !important;
    width: auto !important;
  }
  
  /* Override pour le conteneur tasks - PRIORITÉ ABSOLUE */
  .tasks-container #tasksGridDashboard,
  .tasks-container .tasks-grid,
  .tasks-container [id="tasksGridDashboard"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  
  /* Override toutes les règles responsive */
  @media (max-width: 768px) {
    .tasks-container #tasksGridDashboard,
    .tasks-container .tasks-grid,
    #tasksGridDashboard.tasks-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 1rem !important;
    }
  }
  
  /* Tous les boutons dans cards - full width */
  .card button,
  .card .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Badges et labels */
  .badge {
    display: inline-block !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
}

/* =============================================
   RESPONSIVE MOBILE - INTERVENTION FLOW
   ============================================= */
@media (max-width: 768px) {
  /* Flow header */
  .flow-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .flow-header > button {
    width: 100% !important;
  }
  
  /* Flow stepper */
  .flow-stepper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem !important;
  }
  
  .flow-stepper .step-item {
    min-width: 60px !important;
    flex-shrink: 0 !important;
  }
  
  .flow-stepper .step-label {
    font-size: 0.6rem !important;
    white-space: nowrap !important;
  }
  
  /* Flow navigation */
  .flow-nav {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .flow-nav .btn {
    width: 100% !important;
  }
  
  /* Sections avec gradient */
  [style*="linear-gradient"] {
    padding: 1rem !important;
  }
  
  /* Grid dans cards */
  [style*="display: grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Photos grid */
  [style*="grid-template-columns: repeat"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================
   RESPONSIVE MOBILE - MODALS ET PANELS
   ============================================= */
@media (max-width: 768px) {
  /* Modals fullscreen on mobile */
  [style*="position: fixed"][style*="z-index"] {
    padding: 1rem !important;
  }
  
  [style*="position: fixed"] .card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  /* Buttons in modals */
  [style*="position: fixed"] .btn {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
}

/* =============================================
   FIX MOBILE - THÈME CLAIR FORCÉ (Lisibilité)
   ============================================= */
@media (max-width: 768px) {
  /* Forcer thème clair sur mobile pour TOUS les rôles */
  body, 
  body[data-role="ADMIN"],
  body[data-role="TECHNICIAN"],
  body[data-theme="admin"],
  html {
    background: #f9fafb !important;
    color: #111827 !important;
  }
  
  /* Cards sur mobile - fond blanc, texte noir */
  .card,
  body[data-role="ADMIN"] .card,
  body[data-theme="admin"] .card {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* Titres lisibles */
  .card h1,
  .card h2,
  .card h3,
  .card h4,
  .card h5,
  body[data-role="ADMIN"] .card h1,
  body[data-role="ADMIN"] .card h2,
  body[data-role="ADMIN"] .card h3 {
    color: #111827 !important;
  }
  
  /* Textes dans les cards */
  .card p,
  .card span,
  .card div,
  .card label,
  body[data-role="ADMIN"] .card p,
  body[data-role="ADMIN"] .card span,
  body[data-role="ADMIN"] .card div,
  body[data-role="ADMIN"] .card label {
    color: #374151 !important;
  }
  
  /* Text-muted lisible */
  .text-muted,
  body[data-role="ADMIN"] .text-muted {
    color: #6b7280 !important;
  }
  
  /* Inputs et forms */
  .form-input,
  .form-select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
  }
  
  /* Placeholder lisible */
  ::placeholder {
    color: #9ca3af !important;
  }
  
  /* FORCER labels lisibles dans TOUS les formulaires */
  label,
  form label,
  .card label,
  body[data-role="TECHNICIAN"] label,
  body[data-theme="technician"] label {
    color: #111827 !important;
    font-weight: 600 !important;
  }
  
  /* NE PAS forcer de fond blanc sur les sections bleues - les laisser telles quelles */
  /* Les sections avec fond bleu clair restent bleues pour la lisibilité */
  
  /* Buttons contrastés */
  .btn {
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
  }
  
  .btn-primary {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
  }
  
  .btn-danger {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
  }
  
  .btn-success {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
  }
  
  .btn-warning {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
  }
  
  .btn-secondary {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
  }
  
  /* Header mobile */
  .header,
  body[data-role="ADMIN"] .header {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 2px solid #e5e7eb !important;
  }
  
  .header h1,
  body[data-role="ADMIN"] .header h1 {
    color: #111827 !important;
  }
  
  /* Tables mobile */
  table {
    background: #ffffff !important;
    color: #111827 !important;
  }
  
  th {
    background: #f3f4f6 !important;
    color: #111827 !important;
  }
  
  td {
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* Liens lisibles */
  a {
    color: #3b82f6 !important;
  }
  
  /* Container mobile */
  .container {
    background: transparent !important;
  }
  
  /* FORCER les couleurs sombres sur textes avec style inline blanc */
  .card [style*="color: white"],
  .card [style*="color:white"],
  .card [style*="color: rgba(255,255,255"],
  .card [style*="color:rgba(255,255,255"],
  .card [style*="color: var(--text"],
  .card [style*="color:var(--text"],
  body[data-role="TECHNICIAN"] .card [style*="color"],
  body[data-role="TECHNICIAN"] .card [style*="color:"],
  body[data-theme="technician"] .card [style*="color"] {
    color: #111827 !important;
  }
  
  /* Forcer TOUS les éléments de la fiche client en mode technicien */
  body[data-role="TECHNICIAN"] .card *:not(.btn):not(.badge):not(a),
  body[data-theme="technician"] .card *:not(.btn):not(.badge):not(a) {
    color: #111827 !important;
  }
  
  /* Forcer TOUS les h1, h2, h3, p, span, div dans cards technicien */
  body[data-role="TECHNICIAN"] .card h1,
  body[data-role="TECHNICIAN"] .card h2,
  body[data-role="TECHNICIAN"] .card h3,
  body[data-role="TECHNICIAN"] .card h4,
  body[data-role="TECHNICIAN"] .card h5,
  body[data-role="TECHNICIAN"] .card p,
  body[data-role="TECHNICIAN"] .card span,
  body[data-role="TECHNICIAN"] .card div,
  body[data-role="TECHNICIAN"] .card label,
  body[data-theme="technician"] .card h1,
  body[data-theme="technician"] .card h2,
  body[data-theme="technician"] .card h3,
  body[data-theme="technician"] .card h4,
  body[data-theme="technician"] .card h5,
  body[data-theme="technician"] .card p,
  body[data-theme="technician"] .card span,
  body[data-theme="technician"] .card div,
  body[data-theme="technician"] .card label {
    color: #111827 !important;
  }
  
  /* Exceptions pour les éléments qui doivent garder leurs couleurs - les boutons sont définis ci-dessous */
  
  /* Badge contractType - garder leur couleur de fond mais forcer texte blanc */
  body[data-role="TECHNICIAN"] .badge[style*="background: #dc2626"],
  body[data-role="TECHNICIAN"] .badge[style*="background: #f59e0b"],
  body[data-role="TECHNICIAN"] span[style*="background: #dc2626"],
  body[data-role="TECHNICIAN"] span[style*="background: #f59e0b"],
  body[data-theme="technician"] .badge[style*="background: #dc2626"],
  body[data-theme="technician"] .badge[style*="background: #f59e0b"],
  body[data-theme="technician"] span[style*="background: #dc2626"],
  body[data-theme="technician"] span[style*="background: #f59e0b"] {
    color: #ffffff !important;
  }
  
  /* Réappliquer les couleurs des boutons */
  body[data-role="TECHNICIAN"] .btn-primary,
  body[data-role="TECHNICIAN"] .btn-primary *,
  body[data-theme="technician"] .btn-primary,
  body[data-theme="technician"] .btn-primary * {
    color: #ffffff !important;
  }
  
  body[data-role="TECHNICIAN"] .btn-danger,
  body[data-role="TECHNICIAN"] .btn-danger *,
  body[data-theme="technician"] .btn-danger,
  body[data-theme="technician"] .btn-danger * {
    color: #ffffff !important;
  }
  
  body[data-role="TECHNICIAN"] .btn-success,
  body[data-role="TECHNICIAN"] .btn-success *,
  body[data-theme="technician"] .btn-success,
  body[data-theme="technician"] .btn-success * {
    color: #ffffff !important;
  }
  
  body[data-role="TECHNICIAN"] .btn-warning,
  body[data-role="TECHNICIAN"] .btn-warning *,
  body[data-theme="technician"] .btn-warning,
  body[data-theme="technician"] .btn-warning * {
    color: #ffffff !important;
  }
  
  body[data-role="TECHNICIAN"] .btn-secondary,
  body[data-theme="technician"] .btn-secondary {
    color: #111827 !important;
  }
  
  /* Bordures blanches → grises */
  .card [style*="border: 2px solid white"],
  .card [style*="border:2px solid white"],
  .card [style*="border-bottom: 2px solid white"] {
    border-color: #e5e7eb !important;
  }
  
  /* Backgrounds rgba(255,255,255 → gris clair pour contraste */
  .card [style*="background: rgba(255,255,255"],
  .card [style*="background:rgba(255,255,255"] {
    background: rgba(0,0,0,0.05) !important;
    border-color: #d1d5db !important;
  }
  
  /* Ligne horizontale blanche → grise */
  .card [style*="background: rgba(255,255,255,0.6)"] {
    background: #e5e7eb !important;
  }
}

/* =============================================
   FORMULAIRES - LABELS BLANCS (LISIBILITÉ)
   ============================================= */

/* Tous les labels de formulaires en BLANC pour admin */
label,
.form-label,
form label {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Forcer labels d'installation */
.card label,
.installation-form label,
#installationForm label {
  color: #ffffff !important;
}

/* Sections de lots de travaux */
.lot-section label,
.funding-section label {
  color: #ffffff !important;
}

/* Labels dans les sections avec fond coloré restent lisibles */
[style*="background: #e0f2fe"] label,
[style*="background: #eff6ff"] label,
[style*="background: rgba"] label {
  color: #111827 !important; /* Noir sur fond clair */
}

/* Technician mode mobile - forcer noir sur fond clair */
@media (max-width: 768px) {
  body[data-role="TECHNICIAN"] label,
  body[data-theme="technician"] label {
    color: #111827 !important;
  }
}