/* ============================================================
   victimes.css — Mobile-first overrides for the victim form
   Scoped to #victime_form_id to avoid bleeding into other pages.
   Refonte UX inspirée Syopé : tactile, lisible, mobile-friendly.
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --vic-radius: 8px;
    --vic-gap: 12px;
    --vic-touch: 44px;
    --vic-cat-bg: #f4f6fa;
    --vic-cat-border: #d8dde6;
    --vic-cat-color: #2c3e50;
    --vic-active: #0d6efd;
    --vic-active-bg: #e7f1ff;
    --vic-radio-bg: #ffffff;
    --vic-radio-border: #c5cad3;
    --vic-radio-non: #fde7e9;
    --vic-radio-non-border: #d9534f;
    --vic-radio-oui: #e6f5ec;
    --vic-radio-oui-border: #28a745;
    --vic-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---------- Thème sombre ---------- */
:root.dark {
    --vic-cat-bg: #2a2d35;
    --vic-cat-border: #3d4250;
    --vic-cat-color: #d0d4df;
    --vic-active: #4d8ffc;
    --vic-active-bg: #1a2a45;
    --vic-radio-bg: #1e2128;
    --vic-radio-border: #4a4f5e;
    --vic-radio-non: #3a1c1e;
    --vic-radio-non-border: #b94040;
    --vic-radio-oui: #1a2e20;
    --vic-radio-oui-border: #2d7a45;
    --vic-shadow: 0 1px 3px rgba(0,0,0,.25);
}

:root.dark #victime_form_id .card-header {
    background-color: #1e2128;
    border-bottom-color: #3d4250;
}

:root.dark #victime_form_id table.noBorder tr {
    border-bottom-color: #2e3240;
}

:root.dark #victime_form_id input[type="time"],
:root.dark #victime_form_id input[type="text"],
:root.dark #victime_form_id input[type="number"],
:root.dark #victime_form_id select {
    background-color: #1e2128;
    color: #d0d4df;
    border-color: #4a4f5e;
}

:root.dark a.vbilan-pill,
:root.dark .vbilan-pill {
    background: #2a2d35 !important;
    border-color: #4a4f5e !important;
    color: #d0d4df !important;
}

:root.dark a.vbilan-pill:hover,
:root.dark .vbilan-pill:hover {
    background: #1a2a45 !important;
    border-color: #4d8ffc !important;
    color: #4d8ffc !important;
}

:root.dark a.vbilan-pill.active,
:root.dark .vbilan-pill.active {
    background: #4d8ffc !important;
    border-color: #4d8ffc !important;
    color: #ffffff !important;
}

:root.dark .vbilan-nav-inner::-webkit-scrollbar-thumb {
    background: #4a4f5e;
}

/* Variantes Oui / Non / NonR — overrides texte sur bg sombre */
:root.dark #victime_form_id input[type="radio"].radiobutton[id$="_oui"]:checked + label {
    color: #6ee7b7;
}
:root.dark #victime_form_id input[type="radio"].radiobutton[id$="_non"]:checked + label {
    color: #fca5a5;
}
:root.dark #victime_form_id input[type="radio"].radiobutton[id$="_nonr"]:checked + label {
    background: #2a2d35;
    border-color: #4a4f5e;
    color: #d0d4df;
}

:root.dark input[type="time"]::placeholder,
:root.dark input.flatpickr::placeholder {
    color: #6b7280 !important;
}

/* ---------- Bandeau « Renfort demandé » ---------- */
.vic-renfort-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fde7e9;
    border: 1px solid #f5c2c7;
    border-left: 4px solid #d9534f;
    color: #842029;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    box-shadow: 0 1px 4px rgba(217,83,79,.12);
}
.vic-renfort-banner i {
    font-size: 1.25rem;
    color: #d9534f;
    flex: 0 0 auto;
}
.vic-renfort-banner span { min-width: 0; word-break: break-word; }
:root.dark .vic-renfort-banner {
    background: #3a1c1e;
    border-color: #b94040;
    border-left-color: #ef4444;
    color: #fca5a5;
}

/* ---------- Bilan nav bar (menu d'accès rapide) ----------
 * Épinglée sous la top-bar (.eb-topbar ≈ 52px) au scroll. position:sticky se
 * révélait non fiable dans ce DOM (offset calculé mais non peint : la barre
 * disparaissait au scroll, surtout avec backdrop-filter) → on pilote
 * l'épinglage en JS (classe .is-pinned + placeholder) pour un rendu fiable
 * sur tous les navigateurs. Fond opaque (pas de backdrop-filter, source de
 * bugs de repaint sur élément fixé/collé).
 */
.vbilan-nav {
    position: relative;
    /* > 1030 : la card de write_card() (.card position:relative; z-index:1030)
     * peignait par-dessus la barre épinglée et la masquait. < 1040 : reste sous
     * la top-bar (.eb-topbar). */
    z-index: 1035;
    background: #ffffff;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 8px 12px;
    margin: 0 0 14px 0;
}

/* Épinglée par le JS au scroll : reste visible en haut quoi qu'il arrive,
 * jusqu'au bas de la fiche. left/width sont fixés en JS pour épouser la
 * colonne de contenu. */
.vbilan-nav.is-pinned {
    position: fixed;
    top: 54px;
    margin: 0;
}

/* Réserve la place laissée par la barre une fois épinglée (évite le saut). */
.vbilan-nav-ph {
    margin: 0;
    padding: 0;
}

.vbilan-nav-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.vbilan-nav-inner::-webkit-scrollbar {
    height: 4px;
}

.vbilan-nav-inner::-webkit-scrollbar-thumb {
    background: #d8dde6;
    border-radius: 2px;
}

a.vbilan-pill,
.vbilan-pill {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 20px;
    background: #ffffff !important;
    border: 1.5px solid #d8dde6 !important;
    color: #495057 !important;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

a.vbilan-pill:hover,
.vbilan-pill:hover {
    border-color: #0d6efd !important;
    background: #e7f1ff !important;
    color: #0d6efd !important;
}

a.vbilan-pill.active,
.vbilan-pill.active {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.25);
}

@media (max-width: 767px) {
    .vbilan-pill {
        padding: 5px 12px;
        font-size: 0.82rem;
    }
}

@media print {
    .vbilan-nav,
    .vbilan-nav-ph {
        display: none;
    }
}

/* ---------- Bilan cards (Sprint 1B — refonte structurelle) ---------- */
#victime_form_id .vbilan-cards {
    display: flex;
    flex-direction: column;
    gap: var(--vic-gap);
    margin-top: 16px;
}

#victime_form_id .vbilan-card {
    border-radius: var(--vic-radius);
    border: 1px solid var(--vic-cat-border);
    box-shadow: var(--vic-shadow);
    overflow: hidden;
    /* Offset pour scrollIntoView : laisse de la place à la nav sticky */
    scroll-margin-top: 80px;
}

html { scroll-behavior: smooth; }

#victime_form_id .vbilan-card-header {
    background: var(--vic-cat-bg);
    border-left: 4px solid var(--vic-active);
    padding: 10px 14px;
    color: var(--vic-cat-color);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--vic-cat-border);
}

#victime_form_id .vbilan-card .card-body {
    padding: 12px 14px;
}

#victime_form_id .vbilan-card .form-group.vbp {
    margin-bottom: 10px;
}

#victime_form_id .vbp-label {
    display: block;
    font-weight: 500;
    color: var(--eb-text-secondary, #495057);
    margin-bottom: 4px;
    font-size: 0.92rem;
    overflow-wrap: break-word;
    word-break: normal;
}

#victime_form_id .vbp-field {
    width: 100%;
}

/* Indice « (ou âge) » à côté de l'astérisque de la date de naissance */
#victime_form_id .eb-req-hint {
    color: var(--eb-text-secondary, #6c757d);
    font-weight: 400;
    font-size: 0.8em;
}

#victime_form_id .vbp-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ---------- Indicateur d'autosave (discret, non bloquant) ---------- */
.vic-autosave-status {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1100;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    background: #eef1f5;
    color: #495057;
    border: 1px solid #d8dde6;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.vic-autosave-status.show {
    opacity: 1;
    transform: translateY(0);
}
.vic-autosave-status[data-state="saving"] {
    background: #e7f1ff;
    border-color: #b6d4fe;
    color: #0d6efd;
}
.vic-autosave-status[data-state="saved"] {
    background: #e6f5ec;
    border-color: #badbcc;
    color: #1c6e34;
}
.vic-autosave-status[data-state="offline"] {
    background: #fff3cd;
    border-color: #ffe69c;
    color: #997404;
}
:root.dark .vic-autosave-status {
    background: #2a2d35;
    border-color: #4a4f5e;
    color: #d0d4df;
}
@media (max-width: 767px) {
    .vic-autosave-status {
        left: 8px;
        bottom: 72px; /* au-dessus de la barre d'actions sticky */
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* ---------- Boutons utilitaires de l'en-tête fiche (PDF / mail / QR / impr.)
   Le thème evenement_modern.css rend .btn-secondary blanc avec une bordure
   à 7% d'opacité → invisible sur l'en-tête de card blanc. On leur donne une
   bordure et un fond gris clair nettement lisibles. ---------- */
#victime_form_id .eb-vic-hdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    background: var(--eb-surface-hover, #f1f3f5);
    border: 1px solid var(--eb-border, #ced4da);
    color: var(--eb-text-secondary, #495057);
    border-radius: 8px;
}
#victime_form_id .eb-vic-hdr-btn:hover,
#victime_form_id .eb-vic-hdr-btn:focus {
    background: var(--vic-active-bg, #e7f1ff);
    border-color: var(--vic-active, #0d6efd);
    color: var(--vic-active, #0d6efd);
}
:root.dark #victime_form_id .eb-vic-hdr-btn {
    background: #2a2d35;
    border-color: #4a4f5e;
    color: #d0d4df;
}

/* ---------- Date de naissance + âge sur une ligne ---------- */
#victime_form_id .eb-birthdate-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
#victime_form_id .eb-birthdate-field .datepicker {
    flex: 1 1 130px;
    min-width: 120px;
}
#victime_form_id .eb-birthdate-field .eb-birthdate-sep {
    flex: 0 0 auto;
    color: var(--eb-text-secondary, #6c757d);
    font-size: 0.9rem;
    white-space: nowrap;
}
#victime_form_id .eb-birthdate-field .eb-w-70px {
    flex: 0 0 70px;
    width: 70px;
    max-width: 70px;
}

/* ---------- Table adresse isolée sous la grille état civil ---------- */
#victime_form_id .vic-address-table {
    margin-top: 4px;
}
#victime_form_id .vic-address-table td {
    padding: 6px 8px;
    vertical-align: middle;
}
#victime_form_id .vic-address-table .eb-addr-label,
#victime_form_id .vic-address-table label {
    font-weight: 500;
    color: var(--eb-text-secondary, #495057);
    margin-bottom: 0;
}
/* Desktop : colonne des libellés assez large pour ne pas couper les mots
   (« Dé-com-posée », « Com-plé-ment »). Sur mobile (<768) la table passe en
   blocs empilés via les règles @media plus bas, donc on ne fige pas la largeur. */
@media (min-width: 768px) {
    #victime_form_id .vic-address-table td:first-child {
        width: 170px;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        -webkit-hyphens: none;
        hyphens: none;
    }
}

/* Mise en exergue traumatismes 2/3 (BVP 531-538) */
#victime_form_id .vbp[data-trauma="2"],
#victime_form_id .vbp[data-trauma="3"] {
    background: var(--eb-surface-hover, #fafbfc);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px dashed var(--eb-border, #d8dde6);
}

/* ---------- Legacy compat : état civil reste en table ---------- */
#victime_form_id table.noBorder b {
    font-size: 1rem;
}

#victime_form_id table.noBorder tr td[colspan="4"] b {
    display: block;
    background: var(--vic-cat-bg);
    border-left: 4px solid var(--vic-active);
    padding: 8px 12px;
    margin: 16px 0 8px 0;
    border-radius: var(--vic-radius);
    color: var(--vic-cat-color);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---------- Champs : tailles confortables au doigt ---------- */
#victime_form_id .form-control,
#victime_form_id .form-control-sm {
    min-height: var(--vic-touch);
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: var(--vic-radius);
}

#victime_form_id textarea.form-control,
#victime_form_id textarea.form-control-sm {
    min-height: 80px;
}

#victime_form_id input[type="number"].form-control-sm {
    width: 100%;
    max-width: 140px;
}

#victime_form_id input.timepicker {
    width: 100% !important;
    max-width: 110px;
}

/* ---------- Radio Oui/Non/NR : gros boutons tactiles ---------- */
#victime_form_id input[type="radio"].radiobutton {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#victime_form_id input[type="radio"].radiobutton + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: var(--vic-touch);
    padding: 8px 14px;
    margin: 4px 6px 4px 0;
    background: var(--vic-radio-bg);
    border: 2px solid var(--vic-radio-border);
    border-radius: var(--vic-radius);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
    user-select: none;
    box-shadow: var(--vic-shadow);
    white-space: nowrap;
}

#victime_form_id input[type="radio"].radiobutton + label:hover {
    border-color: var(--vic-active);
    background: var(--vic-active-bg);
}

#victime_form_id input[type="radio"].radiobutton:checked + label {
    border-color: var(--vic-active);
    background: var(--vic-active-bg);
    color: var(--vic-active);
    font-weight: 600;
}

/* Variantes Oui / Non sémantiques */
#victime_form_id input[type="radio"].radiobutton[id$="_oui"]:checked + label {
    border-color: var(--vic-radio-oui-border);
    background: var(--vic-radio-oui);
    color: #1c6e34;
}

#victime_form_id input[type="radio"].radiobutton[id$="_non"]:checked + label {
    border-color: var(--vic-radio-non-border);
    background: var(--vic-radio-non);
    color: #842029;
}

#victime_form_id input[type="radio"].radiobutton[id$="_nonr"]:checked + label {
    border-color: #6c757d;
    background: #e9ecef;
    color: #495057;
}

/* ---------- Sexe M/F : même traitement que radio bilan ---------- */
#victime_form_id input[type="radio"][name="sexe"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#victime_form_id input[type="radio"][name="sexe"] + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: var(--vic-touch);
    padding: 8px 14px;
    margin: 4px 6px 4px 0;
    background: var(--vic-radio-bg);
    border: 2px solid var(--vic-radio-border);
    border-radius: var(--vic-radius);
    cursor: pointer;
    font-weight: 500;
    box-shadow: var(--vic-shadow);
}

#victime_form_id input[type="radio"][name="sexe"]:checked + label {
    border-color: var(--vic-active);
    background: var(--vic-active-bg);
    color: var(--vic-active);
    font-weight: 600;
}

/* ---------- Cellules du tableau : aération ---------- */
#victime_form_id table.noBorder td {
    padding: 6px 8px;
    vertical-align: middle;
}

#victime_form_id table.noBorder tr {
    border-bottom: 1px solid #f1f3f5;
}

#victime_form_id table.noBorder tr:has(td[colspan="4"] b) {
    border-bottom: none;
}

/* ---------- Selectpicker (bootstrap-select) : taille tactile ---------- */
#victime_form_id .bootstrap-select > .dropdown-toggle {
    min-height: var(--vic-touch);
    padding: 8px 12px;
    border-radius: var(--vic-radius);
    font-size: 1rem;
}

/* ---------- Switch toggle (déjà présent) : taille uniforme ---------- */
#victime_form_id .switch {
    margin-left: 4px;
}

/* ---------- TABLETTE : 768-1023px ---------- */
@media (max-width: 1023px) {
    #victime_form_id table.noBorder td {
        padding: 8px 6px;
    }
    #victime_form_id input[type="radio"].radiobutton + label {
        min-width: 64px;
        font-size: 0.95rem;
    }
}

/* ---------- MOBILE : passage 1 colonne ---------- */
@media (max-width: 767px) {
    /* La table 4-colonnes (label1/champ1/label2/champ2) devient 2 colonnes empilées */
    #victime_form_id table.noBorder,
    #victime_form_id table.noBorder tbody {
        display: block;
        width: 100%;
    }

    #victime_form_id table.noBorder tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 8px;
        padding: 6px 0;
    }

    #victime_form_id table.noBorder tr td {
        display: block;
        width: 100%;
        padding: 4px 0;
    }

    /* Catégories en pleine largeur */
    #victime_form_id table.noBorder tr td[colspan="4"] {
        margin-top: 12px;
    }

    /* textarea + col=3 prennent toute la largeur */
    #victime_form_id table.noBorder td[colspan="3"] textarea,
    #victime_form_id table.noBorder td[colspan="3"] input {
        width: 100% !important;
    }

    /* Champs alignés à 100% sur mobile */
    #victime_form_id .form-control,
    #victime_form_id .form-control-sm,
    #victime_form_id .selectpicker,
    #victime_form_id .bootstrap-select {
        width: 100% !important;
        max-width: none;
    }

    /* Radio en grille 3 colonnes égales — le libellé peut passer sur 2 lignes
       (« Non renseigné » débordait à cause de white-space:nowrap hérité). */
    #victime_form_id input[type="radio"].radiobutton + label {
        flex: 1 1 0;
        min-width: 0;
        margin: 4px 4px 4px 0;
        padding: 6px 4px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        font-size: 0.8rem;
        overflow-wrap: break-word;
        hyphens: none;
    }

    #victime_form_id input[type="radio"].radiobutton:last-of-type + label {
        margin-right: 0;
    }

    /* CNIL warning : icône bien visible */
    #victime_form_id .fa-exclamation-triangle {
        font-size: 1.4rem;
    }

    /* Labels au-dessus des champs (mobile) */
    #victime_form_id table.noBorder tr td:first-child {
        font-weight: 500;
        color: #495057;
        margin-bottom: 2px;
    }
}

/* ---------- Sticky save bar en bas (mobile + desktop) ---------- */
#victime_form_id .victime-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: #ffffff;
    border-top: 1px solid #dee2e6;
    padding: 10px 16px;
    margin: 16px -16px 0 -16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

#victime_form_id .victime-sticky-actions .btn {
    min-height: var(--vic-touch);
    padding: 8px 20px;
    font-size: 1rem;
    border-radius: var(--vic-radius);
}

@media (max-width: 767px) {
    #victime_form_id .victime-sticky-actions {
        margin: 16px -8px 0 -8px;
        padding: 10px 12px;
    }
    #victime_form_id .victime-sticky-actions .btn {
        flex: 1;
        min-width: 0;
    }
}

/* ---------- Cards eBrigade : alignées sur le pattern des cards bilan ----------
   Les cards de la fiche (write_card → .card.graycarddefault) reprennent le même
   look que les .vbilan-card : accent bleu à gauche de l'en-tête, rayon et ombre
   douce cohérents. */
#victime_form_id .card {
    border-radius: var(--vic-radius);
    box-shadow: var(--vic-shadow);
    border: 1px solid #e6e9ef;
}

#victime_form_id .card-header,
#victime_form_id .card .card-title {
    background: #fafbfc;
    font-weight: 600;
}

/* Accent bleu à gauche de l'en-tête, comme .vbilan-card-header */
#victime_form_id .card > .card-header.graycard {
    border-left: 4px solid var(--vic-active);
}

/* ---------- MOBILE : cards pleine largeur + ombre moderne ----------
   En mode simple les cards sont dans un .container-fluid (avec padding) + des
   colonnes .col-sm-6 → étroites sur mobile. On réduit ces marges pour occuper
   toute la largeur, comme le bilan (.container-fluid.px-0). */
@media (max-width: 767px) {
    #victime_form_id .container-fluid:not(.px-0) {
        padding-left: 6px;
        padding-right: 6px;
    }
    #victime_form_id .row.g-2 {
        margin-left: -3px;
        margin-right: -3px;
    }
    #victime_form_id .row.g-2 > [class*="col-"] {
        padding-left: 3px;
        padding-right: 3px;
    }
    #victime_form_id .card {
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.07);
        margin-left: 0;
        margin-right: 0;
    }
    /* Toggles statut (mode simple) : libellé à gauche + switch à droite sur la
       MÊME ligne (la règle table mobile empilait td en blocs → grands vides).
       Le <tr> contient 2 paires label/switch → chaque paire occupe ~100% et
       passe à la ligne, donnant 1 toggle par ligne, proprement aligné. */
    #victime_form_id table.noBorder tr:has(.switch) {
        align-items: center;
    }
    #victime_form_id table.noBorder tr:has(.switch) td {
        width: auto;
        display: flex;
        align-items: center;
    }
    #victime_form_id table.noBorder tr:has(.switch) td:has(> label:not(.switch)),
    #victime_form_id table.noBorder tr:has(.switch) td:first-child {
        flex: 1 1 60%;
        min-width: 0;
    }
    #victime_form_id table.noBorder tr:has(.switch) td:has(.switch) {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto;
    }
}

/* ---------- Asterisks et alertes ---------- */
#victime_form_id .RedClass,
#victime_form_id .red {
    color: #d9534f;
    font-weight: 600;
}

/* ---------- Print : conserver le rendu legacy ---------- */
@media print {
    #victime_form_id input[type="radio"].radiobutton {
        position: static;
        opacity: 1;
    }
    #victime_form_id input[type="radio"].radiobutton + label {
        all: unset;
        margin-left: 4px;
    }
    #victime_form_id .victime-sticky-actions {
        display: none;
    }
}