/* Styles for the "Declarer un sinistre" modal (courtiers/sinistres-list), loaded globally (see
   index.html) rather than as this component's own styleUrls, purely to stay under Angular's
   anyComponentStyle build budget (4kb): the modal's own CSS - a 3-step wizard with many distinct
   sections (garage search, document upload, contract cards...) - was ~8.7kb minified, well past
   that per-component limit. Angular's :host pseudo-class only works inside a component's own
   style file, so the handful of rules using it stay in sinistres-list.component.css; everything
   else lives here instead.

   Because this sheet is global, Angular's view encapsulation no longer scopes it: EVERY selector
   must start with ":where(.sinistres-list-scope) ", the class set on the root of
   sinistres-list.component.html. Several rules target generic Bootstrap classes (.modal-content,
   .form-control...) that other modals of the app also use (Clauses libres, packs documents,
   attestation, relevé) - unscoped, they reshaped all of them. :where() adds zero specificity, so
   the cascade inside the component is exactly what it would be without the prefix.
   sinistre-declaration-modal-css.spec.ts fails the test run if a selector is left unscoped. */

/* align-items:center (comme .modal-backdrop du Certificat) centre par rapport à la hauteur du
   VIEWPORT, pas de la page : sur un grand écran (ex. 1300px de haut), ça laisse ~380px de vide
   au-dessus de la modale, ce qui se lit comme "trop bas" - vérifié en réel (Playwright,
   viewport 1600x1300 : modal-content.top = 377px). Ancrée en haut avec un écart fixe à la place,
   pour un rendu identique quelle que soit la hauteur d'écran. 170px cale la modale juste sous la
   rangée de boutons du menu du haut (mesurée en réel à ~151px de bas sur écran large, cf
   conversation) plutôt qu'en dessous d'un simple écart arbitraire. */
:where(.sinistres-list-scope) .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
  overflow-y: auto;
  padding: 170px 0 40px;
}

/* Agrandi et rendu responsive (largeur en %, comme .modal-container de la modale Certificat
   d'assurance) au lieu d'une largeur fixe à 600px trop étroite pour le formulaire complet
   (champs côte à côte, cartes contrat, recherche de garage, upload de documents). */
:where(.sinistres-list-scope) .modal-content {
  background: #fff;
  padding: 0;
  width: 90%;
  /* 2 colonnes fixes à 365px + 20px d'écart + le padding du fieldset (2x20px) + le padding du
     corps de modale (2x20px) = 830px minimum pour que les deux colonnes tiennent sans
     déborder/se tasser de façon inégale - 820px était 10px trop juste. */
  max-width: 860px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  /* margin:auto (pas juste "0 auto") absorbe tout l'espace vertical disponible sur un enfant
     flex et re-centre verticalement tout seul, quel que soit le align-items du parent
     .modal-overlay - c'est ce qui annulait le "ancré en haut" plus haut. */
  margin: 0 auto;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* === Même thème que attestation-modal (bread + cards) === */
/* .modal-content's direct flex children are .sinistre-modal-header and the <form> itself
   (the form wraps both .sinistre-modal-body and .sinistre-modal-footer) - the form has to be
   a flex column too, otherwise .sinistre-modal-body's flex:1/min-height:0 apply to nothing,
   since a plain block-level <form> isn't a flex container on its own. */
:where(.sinistres-list-scope) .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

:where(.sinistres-list-scope) .sinistre-modal-header {
  background-color: #3c3c3c;
  color: #fff;
  padding: 16px 20px 0;
  flex-shrink: 0;
}

:where(.sinistres-list-scope) .sinistre-modal-header .form-group {
  text-align: right;
  margin-bottom: 8px;
}

:where(.sinistres-list-scope) .sinistre-modal-title {
  font-weight: 600;
  font-size: 19px;
  margin-bottom: 12px;
}

:where(.sinistres-list-scope) .sinistre-bread {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.sinistres-list-scope) .sinistre-bread li {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, .6);
}

:where(.sinistres-list-scope) .sinistre-bread li .inner .icon {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

:where(.sinistres-list-scope) .sinistre-bread li .inner .text {
  font-size: 13px;
}

:where(.sinistres-list-scope) .sinistre-bread li.done {
  color: #fff;
  border-bottom-color: #b2d239;
}

:where(.sinistres-list-scope) .sinistre-bread li.done .icon {
  color: #b2d239;
}

:where(.sinistres-list-scope) .sinistre-bread li.active {
  color: #fff;
  border-bottom-color: #c4d500;
}

:where(.sinistres-list-scope) .sinistre-bread li.active .icon {
  color: #c4d500;
}

:where(.sinistres-list-scope) .sinistre-bread li.clickable {
  cursor: pointer;
}

:where(.sinistres-list-scope) .sinistre-bread li.clickable:hover {
  color: #fff;
}

:where(.sinistres-list-scope) .sinistre-modal-body {
  padding: 20px;
  background: #f8f8f8;
  overflow-y: auto;
  flex: 1;
  /* Without this, a flex item won't shrink below its content's natural height (default
     min-height: auto), so this pushes .modal-content past its max-height instead of
     scrolling internally - the long step-3 form was getting cut off with no scrollbar. */
  min-height: 0;
}

:where(.sinistres-list-scope) .sinistre-intro {
  font-size: 15px;
  color: #666;
  margin-bottom: 16px;
}

:where(.sinistres-list-scope) .sinistre-back {
  margin-bottom: 16px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}

:where(.sinistres-list-scope) .sinistre-back:hover {
  color: #333;
}

:where(.sinistres-list-scope) .sinistre-modal-footer {
  border-top: 1px solid #eee;
  background: #fff;
  padding: 12px 20px 16px;
  text-align: right;
  flex-shrink: 0;
}

:where(.sinistres-list-scope) .btn-sinistre-secondary,
:where(.sinistres-list-scope) .btn-sinistre-primary {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 15px;
  cursor: pointer;
}

:where(.sinistres-list-scope) .btn-sinistre-secondary {
  background: #eeeeee;
  color: #333;
}

:where(.sinistres-list-scope) .btn-sinistre-secondary:hover {
  background: #ddd;
}

:where(.sinistres-list-scope) .btn-sinistre-primary {
  /* Vert Five (comme le menu du haut et l'étape active du fil d'ariane de cette modale),
     pas le vert Bootstrap par défaut - la charte graphique Five Insurance n'a qu'un seul vert. */
  background: #c4d500;
  color: #3c3c3c;
  margin-left: 8px;
}

:where(.sinistres-list-scope) .btn-sinistre-primary:hover {
  background: #b2d239;
}

:where(.sinistres-list-scope) .btn-sinistre-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* === RADIO BUTTONS === */
:where(.sinistres-list-scope) .modal-content .form-group div label {
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
  font-weight: normal;
}

:where(.sinistres-list-scope) .modal-content .form-group div input[type="radio"] {
  margin-right: 5px;
}

/* === CARTE CONTRAT (clic direct, même thème que les cartes attestation) === */
:where(.sinistres-list-scope) .contrat-radio-wrapper {
  position: relative;
}

:where(.sinistres-list-scope) .contrat-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  background-color: #fff;
}

:where(.sinistres-list-scope) .contrat-radio-label:hover {
  border-color: #b2d239;
  background: #f5f5f5;
}

:where(.sinistres-list-scope) .contrat-radio-label.selected {
  border-color: #b2d239;
  background: #f1f1f1;
}

:where(.sinistres-list-scope) .contrat-radio-label>i:first-child {
  color: #888;
  font-size: 16px;
  margin-top: 2px;
}

:where(.sinistres-list-scope) .contrat-radio-label .contrat-check {
  color: #b2d239;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Contenu des infos du contrat */
:where(.sinistres-list-scope) .contrat-info {
  flex: 1;
  min-width: 0;
}

:where(.sinistres-list-scope) .contrat-info-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

:where(.sinistres-list-scope) .contrat-info-risque {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}

:where(.sinistres-list-scope) .contrat-info-date {
  font-size: 14px;
  color: #888;
}

/* Pack/Date résumé + tags (même thème olive que le reste du modal) */
:where(.sinistres-list-scope) .sinistre-summary-bar {
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 15px;
  color: #555;
  margin-bottom: 14px;
}

:where(.sinistres-list-scope) .sinistre-summary-bar strong {
  color: #333;
}

:where(.sinistres-list-scope) .sinistre-tag {
  display: inline-block;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eee;
  color: #555;
  white-space: nowrap;
}

:where(.sinistres-list-scope) .sinistre-tag-accent {
  background: #b2d239;
  color: #fff;
}

:where(.sinistres-list-scope) .sinistre-tag-active {
  /* Même vert Five que le reste de la modale, plus le vert Bootstrap par défaut. */
  background: #b2d239;
  color: #fff;
}

:where(.sinistres-list-scope) .sinistre-tag-inactive {
  background: #ccc;
  color: #fff;
}

/* Liste scrollable */
:where(.sinistres-list-scope) .contrats-list {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Scrollbar personnalisé */
:where(.sinistres-list-scope) .contrats-list::-webkit-scrollbar {
  width: 8px;
}

:where(.sinistres-list-scope) .contrats-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

:where(.sinistres-list-scope) .contrats-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

:where(.sinistres-list-scope) .contrats-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === Documents (même thème que les cartes attestation/contrat) === */
:where(.sinistres-list-scope) .sinistre-doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

:where(.sinistres-list-scope) .sinistre-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

:where(.sinistres-list-scope) .sinistre-doc-item>i:first-child {
  color: #888;
  font-size: 16px;
}

:where(.sinistres-list-scope) .sinistre-doc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.sinistres-list-scope) .sinistre-doc-category {
  font-size: 13px;
  color: #fff;
  background: #b2d239;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

:where(.sinistres-list-scope) .sinistre-doc-name {
  font-size: 15px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.sinistres-list-scope) .sinistre-doc-remove {
  border: none;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  flex-shrink: 0;
}

:where(.sinistres-list-scope) .sinistre-doc-remove:hover {
  color: #d9534f;
}

:where(.sinistres-list-scope) .sinistre-doc-empty {
  font-size: 15px;
  color: #888;
  margin-bottom: 10px;
}

:where(.sinistres-list-scope) .sinistre-doc-add {
  display: flex;
  align-items: center;
  gap: 14px;
}

:where(.sinistres-list-scope) .sinistre-doc-add select.form-control {
  width: auto;
  flex: 0 0 150px;
}

:where(.sinistres-list-scope) .sinistre-doc-file-picker {
  flex: 1;
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: #555;
  min-width: 0;
  margin-bottom: 0;
}

:where(.sinistres-list-scope) .sinistre-doc-file-picker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src/assets/css/screen.css has a global "input[type='file'] { display: block; }" rule that
   outranks the browser's default [hidden] styling, so the native input was rendering its own
   ugly "Choisir un fichier" control right next to this label's - only one should show. */
:where(.sinistres-list-scope) .sinistre-doc-file-picker input[type="file"] {
  display: none;
}

:where(.sinistres-list-scope) .sinistre-doc-file-picker:hover {
  border-color: #b2d239;
}

:where(.sinistres-list-scope) .sinistre-doc-file-picker.disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* FIV-225: étape 3 en grille 2 colonnes - la modale a maintenant assez de largeur (820px) pour
   poser les champs courts (selects, inputs simples, paires oui/non) côte à côte plutôt qu'un long
   formulaire empilé sur une seule colonne. .sinistre-form-grid-full force les blocs qui peuvent
   s'étendre (garage, assurés, documents) à occuper toute la largeur, sans perturber l'appariement
   automatique des autres champs (l'ordre du DOM ne change pas). */
:where(.sinistres-list-scope) .sinistre-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

:where(.sinistres-list-scope) .sinistre-form-grid-full {
  grid-column: 1 / -1;
}

/* Sections (Sinistre / Véhicule / Police & tiers / Personnes concernées / Documents) en vrais
   <fieldset><legend> - même motif visuel que le formulaire "Rédiger une proposition" (simulateur,
   voir screen.css : fieldset bordé/fond clair + legend en gras) plutôt qu'un simple titre
   souligné, pour que la déclaration de sinistre suive la même convention que le reste de l'app.
   Legend alignée à gauche (pas centrée comme dans le simulateur) pour rester cohérente avec le
   reste des titres de cette modale (icône puis texte, alignés à gauche). */
:where(.sinistres-list-scope) .sinistre-fieldset {
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f8f8;
  padding: 4px 20px 20px;
  margin: 0 0 20px;
}

:where(.sinistres-list-scope) .sinistre-fieldset legend {
  width: auto;
  float: none;
  padding: 0 8px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  border: none;
  line-height: normal;
}

:where(.sinistres-list-scope) .sinistre-fieldset legend i {
  color: #b2d239;
  margin-right: 8px;
}

/* Deux colonnes indépendantes (flex, pas grid) : chaque colonne garde sa propre hauteur, contrairement
   à .sinistre-form-grid où toute la ligne partage la hauteur du champ le plus haut. */
:where(.sinistres-list-scope) .sinistre-two-col {
  display: flex;
  gap: 0 20px;
  align-items: flex-start;
}

:where(.sinistres-list-scope) .sinistre-two-col .sinistre-col {
  flex: 1;
  min-width: 0;
}

/* Liste des assurés : cases à cocher (une par ligne) au lieu d'un <select multiple>, plus simple
   à utiliser qu'un Ctrl/Cmd + clic. */
:where(.sinistres-list-scope) .sinistre-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

:where(.sinistres-list-scope) .sinistre-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}

:where(.sinistres-list-scope) .sinistre-checkbox-item input[type="checkbox"] {
  margin: 0;
}

/* Cause : zone de texte redimensionnable en hauteur (pas horizontalement, pour ne pas déborder
   de sa colonne dans la grille). */
:where(.sinistres-list-scope) #cause {
  resize: vertical;
  min-height: 38px;
}

/* Tous les champs (input/select/textarea) de la modale gardent une largeur fixe de 365px, quelle
   que soit l'étape ou la colonne de la grille - ils ne doivent ni s'étirer pour remplir leur
   conteneur, ni varier d'un champ à l'autre. */
:where(.sinistres-list-scope) .modal-content input.form-control,
:where(.sinistres-list-scope) .modal-content select.form-control,
:where(.sinistres-list-scope) .modal-content textarea.form-control {
  width: 365px;
  max-width: 365px;
}

/* Hors Auto, Tiers est seul dans son fieldset : il occupe toute la ligne au lieu de conserver
   artificiellement la largeur d'une colonne de la grille. */
:where(.sinistres-list-scope) .modal-content .sinistre-full-width-field .form-control {
  width: 100%;
  max-width: none;
}

/* input seulement : un texte trop long est tronqué proprement (ellipsis) plutôt que d'élargir le
   champ. Pas appliqué à select : text-overflow/overflow sur un <select> natif n'est pas fiable
   d'un navigateur à l'autre et peut faire disparaître complètement le texte de l'option
   sélectionnée au lieu de le tronquer - le navigateur gère déjà nativement l'affichage de la
   valeur choisie dans une largeur fixe sans avoir besoin de cette règle. */
:where(.sinistres-list-scope) .modal-content input.form-control {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* === Garage agréé : panneau de recherche (même thème cartes/olive) === */
:where(.sinistres-list-scope) .sinistre-panel {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 14px 16px;
  background: #fff;
  margin-bottom: 15px;
}

:where(.sinistres-list-scope) .sinistre-panel-intro {
  font-size: 15px;
  color: #666;
  margin-bottom: 10px;
}

/* Titre visible en haut de chaque panneau encadré (Garage agréé, Intervention de la police...) -
   sans ça, deux panneaux au même style (bordure + fond blanc) sont indiscernables l'un de
   l'autre pour l'utilisateur. */
:where(.sinistres-list-scope) .sinistre-panel-title {
  font-weight: 600;
  font-size: 15px;
  color: #333;
  margin: 0 0 12px;
}

:where(.sinistres-list-scope) .sinistre-panel-title i {
  color: #b2d239;
  margin-right: 6px;
}

:where(.sinistres-list-scope) .sinistre-garage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
}

:where(.sinistres-list-scope) .sinistre-garage-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

:where(.sinistres-list-scope) .sinistre-garage-card:hover {
  border-color: #b2d239;
  background: #f5f5f5;
}

:where(.sinistres-list-scope) .sinistre-garage-card>i:first-child {
  color: #888;
  font-size: 16px;
}

:where(.sinistres-list-scope) .sinistre-garage-card>i:last-child {
  color: #ccc;
  font-size: 14px;
}

:where(.sinistres-list-scope) .sinistre-garage-body {
  flex: 1;
  min-width: 0;
}

:where(.sinistres-list-scope) .sinistre-garage-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

:where(.sinistres-list-scope) .sinistre-garage-address {
  font-size: 14px;
  color: #666;
  margin-top: 2px;
}

:where(.sinistres-list-scope) .sinistre-garage-phone {
  font-size: 14px;
  color: #888;
  margin-top: 2px;
}

:where(.sinistres-list-scope) .sinistre-garage-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #b2d239;
  background: #f1f8e4;
  border-radius: 4px;
}

:where(.sinistres-list-scope) .sinistre-garage-selected>i:first-child {
  color: #b2d239;
  font-size: 20px;
}

:where(.sinistres-list-scope) .sinistre-garage-selected .sinistre-back {
  margin-top: 0;
}

/* Autocomplétion en direct : liste de suggestions qui flotte sous le champ, comme une recherche
   d'adresse classique - remplace l'ancien couple bouton "Rechercher" + <select> de villes. */
:where(.sinistres-list-scope) .sinistre-autocomplete {
  position: relative;
}

:where(.sinistres-list-scope) .sinistre-autocomplete-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
}

:where(.sinistres-list-scope) .sinistre-autocomplete-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + 2px);
  left: 0;
  width: 365px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

:where(.sinistres-list-scope) .sinistre-autocomplete-item {
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

:where(.sinistres-list-scope) .sinistre-autocomplete-item:hover {
  background: #f1f8e4;
  color: #333;
}

/* === Étape 1 (recherche de contrats) : même panneau/icônes que le reste === */
:where(.sinistres-list-scope) .sinistre-form-row {
  display: flex;
  gap: 14px;
}

:where(.sinistres-list-scope) .sinistre-form-row .form-group {
  flex: 1;
  min-width: 0;
}

:where(.sinistres-list-scope) .sinistre-panel .form-group label i,
:where(.sinistres-list-scope) .btn-sinistre-primary i {
  color: #b2d239;
  margin-right: 4px;
}

:where(.sinistres-list-scope) .btn-sinistre-primary i {
  color: inherit;
}

:where(.sinistres-list-scope) .sinistre-panel label {
  font-weight: 600;
  font-size: 15px;
  color: #495057;
}

/* === Détail de sinistre (ligne dépliée dans la table, réutilise .pack-details-row global) ===
   Grille de fiches (libellé au-dessus, valeur en dessous) plutôt qu'une liste compacte sur une
   seule colonne - plus lisible quand plusieurs champs doivent être comparés d'un coup d'œil. */
:where(.sinistres-list-scope) .sinistre-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px 24px;
}

:where(.sinistres-list-scope) .sinistre-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:where(.sinistres-list-scope) .sinistre-detail-key {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  color: #888;
}

:where(.sinistres-list-scope) .sinistre-detail-value {
  font-size: 16px;
  color: #333;
}