/**
 * =============================================================================
 * Fichier      : app/modules/Fiche/assets/css/fiche.css
 * Auteur       : Régis KREMER
 * Version      : 2.1.7 (Refonte 2025-10-31)
 * Description  : Styles unifiés Fiche d’intervention + Modale + Header riche.
 * - [AJOUT] Info-bulle d'aide (?) dans l'en-tête de la modale.
 * - [CORRECTIF] Position de l'info-bulle (sous l'icône, pas au-dessus).
 * - [MODIFIÉ] Augmentation taille vignettes photos (350px / 450px haut).
 * - [MODIFIÉ] Modale élargie (1140px) et tableau avec coins arrondis.
 * =============================================================================
 */

/* ---------- Conteneur fiche ---------- */
.fi-container { padding:12px; }
.fi-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.fi-state { font-size:.95rem; color:#1f2937; }
.fi-section { margin:12px 0; }
.fi-section>h4 { margin:0 0 6px 0; font-size:1.1rem; }
.fi-row { display:grid; grid-template-columns:160px 1fr; gap:10px; align-items:center; margin:8px 0; }
.fi-row label { font-weight:700; color:#1f2937; }

.fi-row input[type="text"],
.fi-row input[type="number"],
.fi-row input[type="date"],
.fi-section textarea,
.fi-table input[type="number"],
.fi-table input[type="date"],
.fi-table select {
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:8px 10px;
  font:inherit;
  background:#fff;
  box-sizing: border-box; 
}
.fi-section textarea { min-height:90px; resize:vertical; }

.fi-inline-actions { margin-top:.5rem; }
.fi-inline-actions .button { padding:.5rem .7rem; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer; }
.fi-inline-actions .button:hover { background:#f3f4f6; }

/* ---------- Tableau intervenants ---------- */
.fi-table {
  width: 100%;
  margin-top: .4rem;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #d1d5db;
  border: none;
  table-layout: fixed;
}
.fi-table th, .fi-table td {
  border: none;
  border-bottom: 1px solid #d1d5db;
  border-left: 1px solid #d1d5db;
  padding: 7px;
  font-size: 13px;
  vertical-align: middle;
  word-wrap: break-word;
}
.fi-table th { background:#f9fafb; text-align:left; }

/* Tailles des colonnes */
.fi-table th:nth-child(1), .fi-table td:nth-child(1) { width: auto; } /* Agent (flexible) */
.fi-table th:nth-child(2), .fi-table td:nth-child(2) { width: 170px; } /* Temps */
.fi-table th:nth-child(3), .fi-table td:nth-child(3) { width: 150px; } /* Date */
.fi-table th:nth-child(4), .fi-table td:nth-child(4) { width: 50px; text-align: center; } /* Actions (X) */

.fi-table th:first-child,
.fi-table td:first-child {
  border-left: none;
}
.fi-table tfoot td {
  border-bottom: none;
}
/* (Styles tfoot du CSS précédent supprimés pour correspondre à votre version 2.1.3) */


.fi-time-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fi-time-inputs input[type="number"] {
  width: 100%;
  flex: 1 1 40px;
  min-width: 40px;
  text-align: center;
  padding: 8px 4px;
}
.fi-time-inputs span {
  color: #64748b;
  font-size: 14px;
  flex-shrink: 0;
}

/* Pied de tableau: total (votre version) */
.fi-table tfoot td { text-align:right; font-weight:700; font-size:1.1rem; padding-right:12px; }
.fi-table tfoot td:last-child { 
  text-align:left; 
  padding-left:8px; 
  width: 100px;
}
#fi-total-hrs { font-variant-numeric: tabular-nums; }


/* ---------- Décisions / cases ---------- */
.fi-check { display:inline-flex; align-items:center; margin-right:12px; gap:.45rem; }

/* ---------- Signatures (optionnel) ---------- */
.fi-sign { display:none; }
.fi-readonly { opacity:.9; filter:grayscale(.2); }

/* ---------- Photos d’intervention (votre version) ---------- */
.fi-photos {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
  gap:10px;
  margin-top:.6rem;
}
.fi-photo {
  position:relative;
  border:1px solid #d1d5db;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}
.fi-photo img {
  display:block;
  width:100%;
  height:450px;
  object-fit:cover;
}
.fi-photo .fi-row-del {
  position:absolute;
  top:6px; right:6px;
  border:0;
  background:#e11d48;
  color:#fff;
  border-radius:7px;
  padding:4px 7px;
  font-weight:700;
  cursor:pointer;
}

/* Input file stylé (géré par JS: #fi-upload + label) */
#fi-upload[type="file"],
#fiInputFiles[type="file"],
#fi-capture[type="file"] {
  width:.1px; height:.1px; opacity:0; overflow:hidden; position:absolute; z-index:-1;
}
#fi-upload[type="file"] + label,
#fiInputFiles[type="file"] + label,
#fi-capture[type="file"] + label {
  display:inline-block;
  padding:8px 12px;
  margin-bottom:10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  font-weight:600;
  color:#1f2937;
  cursor:pointer;
  transition:background-color .2s, border-color .2s;
}
#fi-upload[type="file"] + label:hover,
#fiInputFiles[type="file"] + label:hover { background:#f3f4f6; }
#fi-upload[type="file"]:focus + label,
#fiInputFiles[type="file"]:focus + label { outline:2px solid #3b82f6; outline-offset:2px; }

/* ---------- Bouton historique pulse ---------- */
@keyframes fiPulse {
  0% { box-shadow:0 0 0 0 rgba(14,165,233,.45); }
  70% { box-shadow:0 0 0 12px rgba(14,165,233,0); }
  100% { box-shadow:0 0 0 0 rgba(14,165,233,0); }
}
.fi-pulse { animation: fiPulse 1.6s infinite; }

/* ---------- Toast ---------- */
.fi-toast {
  position:fixed; right:16px; bottom:16px;
  background:#0ea5e9; color:#fff; padding:10px 14px; border-radius:9px;
  box-shadow:0 6px 24px rgba(2,6,23,.18); z-index:200100;
}
.fi-toast.ok { background:#16a34a; }
.fi-toast.err { background:#e11d48; }

/* ---------- Modale FI ---------- */
.fi-modal[hidden] { display:none !important; }
.fi-modal {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.55);
  z-index:200000;
}
.fi-modal .fi-modal-content {
  width:min(1140px, 96vw);
  max-height:90vh;
  overflow-y:hidden;
  display:flex;
  flex-direction:column;
  background:#fff; border-radius:12px;
  box-shadow:0 20px 60px rgba(2,6,23,.25);
}
.fi-modal-header, .fi-modal-footer {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid #e5e7eb;
  flex-shrink:0;
}
.fi-modal-footer { border-top:1px solid #e5e7eb; border-bottom:0; }
.fi-modal-body {
  padding:12px 16px;
  overflow-y:auto;
  overflow-x:hidden;
  flex-grow:1;
  min-height: 0;
}
.fi-modal .fi-title { margin:0; font-size:1.1rem; }
.fi-modal .fi-close {
  appearance:none; border:0; background:#eff6ff; color:#1f2937;
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:20px; line-height:34px; text-align:center;
}
.fi-modal .fi-close:hover { background:#dbeafe; }
#fi-modal-cancel { background:#f3f4f6; border:1px solid #e5e7eb; }
#fi-modal-cancel:hover { background:#e5e7eb; }

/* ---------- En-tête riche dans la modale ---------- */
.fi-modal-info-header {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  border-bottom:2px solid #e5e7eb;
  padding-bottom:.8rem;
  margin-bottom:1rem;
}
.fi-modal-logo img { max-width:220px; max-height:72px; display:block; }
.fi-modal-header-meta { justify-self:end; text-align:right; line-height:1.35; }
.fi-modal-header-meta h2 { margin:0 0 4px 0; font-size:1.7rem; color:#111827; }
.fi-modal-header-meta p { margin:1px 0; font-size:.95rem; color:#1f2937; }

/* ---------- Scroll body bloqué quand modale ouverte ---------- */
body.modal-open, body.no-scroll { overflow:hidden; }

/* ---------- Accessibilité ---------- */
:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.muted { color:#64748b; font-style:italic; }

/* ---------- Impression ---------- */
@media print {
  .fi-container, .fi-actions, .fi-modal { display:none !important; }
  .fi-print { display:block; }
}

/* ================================== */
/* === AJOUT (CSS Info-bulle) === */
/* ================================== */

/* Wrapper pour titre + info-bulle (dans modal_view.php) */
.fi-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Info-bulle (?) */
.fi-help-bubble {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #e0e7ff; /* Bleu clair */
  color: #3b82f6; /* Bleu */
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: help;
  position: relative; /* Requis pour le tooltip */
}
.fi-help-bubble:hover,
.fi-help-bubble:focus {
  background-color: #3b82f6;
  color: #fff;
  outline: none;
}

/* Tooltip (basé sur l'attribut data-tooltip) */
.fi-help-bubble[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  /* === MODIFIÉ : Positionné en dessous === */
  top: calc(100% + 10px); /* Au lieu de bottom: 120% */
  left: 50%;
  transform: translateX(-50%);
  
  /* Style */
  background-color: #1f2937; /* Gris foncé */
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  
  /* Taille et visibilité */
  width: 320px; /* Largeur fixe pour le texte */
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
}

/* Petite flèche (triangle) au-dessus du tooltip */
.fi-help-bubble[data-tooltip]::before {
  content: '';
  position: absolute;
  /* === MODIFIÉ : Positionné en dessous === */
  top: 100%; /* Au lieu de bottom: 100% */
  left: 50%;
  transform: translateX(-50%);
  
  border: 6px solid transparent;
  /* === MODIFIÉ : Flèche pointe vers le haut === */
  border-bottom-color: #1f2937; /* Au lieu de border-top-color */
  
  /* Visibilité */
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
}

/* Affichage au survol ou au focus (accessibilité) */
.fi-help-bubble[data-tooltip]:hover::after,
.fi-help-bubble[data-tooltip]:hover::before,
.fi-help-bubble[data-tooltip]:focus::after,
.fi-help-bubble[data-tooltip]:focus::before {
  opacity: 1;
  visibility: visible;
}

/* ================================== */
/* === Styles Read-Only (Pré-clôturé) === */
/* ================================== */

/* Cacher les boutons d'ajout et d'upload */
.fi-readonly .fi-inline-actions,
.fi-readonly label[for="fi-upload"],
.fi-readonly label[for="fi-capture"] {
  display: none !important;
}

/* Griser et désactiver les inputs */
.fi-readonly select,
.fi-readonly input[type="number"],
.fi-readonly input[type="date"],
.fi-readonly textarea,
.fi-readonly .fi-check input[type="checkbox"] {
  background-color: #f9fafb; /* Fond gris clair */
  opacity: 0.9;
/* pointer-events: none; A ÉTÉ SUPPRIMÉ -- bloquait le JS */
  border-color: #e5e7eb;
}

/* Apparence "texte" pour la description (en lecture seule) */
.fi-readonly .fi-readonly-desc {
  min-height: 90px; /* Hauteur min identique au textarea d'édition */
  /* max-height et overflow-y sont supprimés pour permettre au bloc de s'étendre */
  padding: 8px 10px;
  background-color: #f9fafb; /* Fond gris clair */
  border: 1px dashed #e5e7eb; /* Bordure pointillée */
  border-radius: 8px;
  line-height: 1.5;
  white-space: pre-wrap; /* Respecte les sauts de ligne du texte */
  word-break: break-word; /* Coupe les mots longs */
}

.fi-readonly .fi-readonly-desc.muted {
  font-style: italic;
  color: #64748b;
}

/* Apparence "texte" pour les selects de la table */
.fi-readonly .fi-table select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  padding-left: 0;
  background-color: transparent;
  font-weight: 500;
  color: #1f2937;
}

/* Cacher les flèches des inputs numériques */
.fi-readonly .fi-time-inputs input::-webkit-outer-spin-button,
.fi-readonly .fi-time-inputs input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fi-readonly .fi-time-inputs input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  border: none;
  background: transparent;
  text-align: right;
  padding-right: 2px;
}
.fi-readonly .fi-time-inputs span {
    padding-left: 0;
}