/* sign · IFCE — helpers additifs uniquement.
   Le thème Valex (chargé avant) gère le rendu des pages connectées ;
   ce fichier n'ajoute que : pastilles de statut, chronologie, avatar,
   un wrapper de tableau, et le style du portail public (login + signataire). */
:root{
  --bg:#eef1f6; --surface:#fff; --ink:#1a2235; --muted:#6b7688; --line:#e6e9f1;
  --primary:#26407a; --primary-d:#1c3160; --primary-soft:#eaf0fb;
  --ok:#2b8a3e; --ok-soft:#e7f6ec; --warn:#e8590c; --warn-soft:#fdeee4;
  --danger:#c92a2a; --danger-soft:#fbe9e9; --info:#1971c2; --info-soft:#e7f1fb;
  --radius:14px; --shadow:0 1px 2px rgba(20,30,55,.05),0 10px 30px rgba(20,30,55,.05);
}

/* ---- Utilitaire : autorise un enfant flex/grid à rétrécir sous sa taille
   intrinsèque (indispensable pour que text-truncate/ellipsis fonctionne).
   Déjà référencé dans le markup mais jamais défini auparavant. ---- */
.min-width-0{min-width:0}

/* ---- Pastilles de statut (additif sur le .badge Valex) ---- */
.badge.b-default{background:#eceef3;color:#5b6472}
.badge.b-success{background:var(--ok-soft);color:var(--ok)}
.badge.b-primary{background:var(--primary-soft);color:var(--primary)}
.badge.b-info{background:var(--info-soft);color:var(--info)}
.badge.b-warning{background:var(--warn-soft);color:var(--warn)}
.badge.b-danger{background:var(--danger-soft);color:var(--danger)}
.badge.b-role{background:#eef1f6;color:#566}

/* ---- Onglets de statut (accueil) : une seule ligne, défilement horizontal ---- */
#statusTabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#statusTabs::-webkit-scrollbar{display:none}
#statusTabs .nav-item{flex:0 0 auto}
#statusTabs .nav-link{white-space:nowrap}

/* ---- Wrapper « tableau en carte » (admin) ---- */
.table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}

/* ---- Chronologie (détail demande) ---- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline:before{content:"";position:absolute;left:7px;top:5px;bottom:5px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 15px 26px}
.timeline li:before{content:"";position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--primary)}
.timeline .t-when{display:block;font-size:11px;color:var(--muted)}
.timeline .t-what{font-weight:600;text-transform:capitalize}

/* ---- Avatar initiales (destinataires) ---- */
.sign-avatar{width:38px;height:38px;min-width:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;user-select:none}
/* Actions d'un destinataire (détail demande) : deux petits boutons côte à côte ;
   passent à la ligne sous les infos sur mobile (le niveau OTP est choisi en modal). */
.sig-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;flex-wrap:wrap}
@media(max-width:575.98px){
  .sig-actions{width:100%;margin-left:50px}
}

/* ---- Portail public (login + signataire) : pas de shell Valex ---- */
.auth-body{background:linear-gradient(160deg,#1c3160,#26407a 55%,#2f4f93);min-height:100vh}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:#fff;border-radius:18px;box-shadow:0 28px 70px rgba(8,18,45,.4);padding:36px;width:100%;max-width:390px}
.auth-brand{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
.auth-sub{color:var(--muted);margin-bottom:22px;font-size:13px}
.brand-mark{color:var(--primary)}
.auth-card .alert-success{background:var(--ok-soft);color:#1e6b2e;border-color:#bfe3c8}
.auth-card .alert-danger{background:var(--danger-soft);color:#9b1c1c;border-color:#f2c2c2}

/* ---- Sidebar : menu principal visible sans defaultmenu.min.js ----
   Valex masque ul.slide-menu via `display:none!important` (révélé par sa JS, retirée).
   On réaffiche le menu de 1er niveau et on fixe des couleurs de texte lisibles. */
.app-sidebar .main-menu > .slide-menu{display:block!important}
.app-sidebar .side-menu__item{color:#445069;display:flex;align-items:center}
.app-sidebar .side-menu__icon{color:#67718a;display:inline-flex;align-items:center;line-height:1}
.app-sidebar .side-menu__label{line-height:1}
.app-sidebar .slide.active > .side-menu__item,
.app-sidebar .side-menu__item:hover{color:var(--primary);background:var(--primary-soft)}
.app-sidebar .slide.active > .side-menu__item .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__icon{color:var(--primary)}
.app-sidebar .category-name{color:#9aa3b2}

/* ---- Ajustements Valex : header + hamburger maison ---- */
/* Hauteur 64px = celle de .main-sidebar-header (4rem) → la bordure basse du
   header s'aligne avec la barre sous le logo de la sidebar. */
.app-header .main-header-container{
  min-height:64px;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.55rem 1rem;
}

/* Mobile (<992px) : header FIXE, bord à bord, collé en haut.
   sticky.js bascule la position du header de façon imprévisible (en flux au repos,
   fixe au scroll) → on impose position:fixed pleine largeur et on compense le
   contenu par un padding-top. z-index 100 : l'overlay (101) et la sidebar (103)
   passent au-dessus quand le menu s'ouvre. */
@media (max-width:991.98px){
  .app-header{
    position:fixed !important; inset-block-start:0; inset-inline:0; width:100% !important;
    padding-inline-start:0 !important; margin:0 !important; z-index:100;
    box-shadow:0 1px 0 var(--line);
  }
  /* hauteur header (64px) + ~15px d'air sous le header */
  .main-content.app-content{ margin-block-start:0 !important; padding-block-start:79px !important; }
}

/* Desktop (>=992px) : header aligné sur le contenu + 15px d'air sous le header.
   - Le header (fixe chez Valex) et le contenu de page partagent le conteneur
     .container-fluid (94% centré) ; on retire le padding horizontal AJOUTÉ au header
     pour que ses bords s'alignent EXACTEMENT sur ceux du contenu (sinon décalage 16px).
   - Le header étant position:fixed (64px de haut), on REMPLACE la marge Valex
     (.app-content : margin-block-start:3.85rem ≈ 61.6px) par 79px = 64px (header)
     + 15px d'air. ⚠️ Ne PAS ajouter de padding-block-start ici : il s'empilerait sur
     la marge Valex (61.6px + 79px ≈ 140px → gros trou sous le header).
   - padding-inline:1.25rem = même retrait horizontal que le contenu de page
     (.main-content .5rem + gutter .container-fluid 0.75rem = 20px) → bords du header
     alignés sur ceux du contenu, et « Déconnexion » décollé du bord droit. */
@media (min-width:992px){
  .app-header .main-header-container{ padding-inline:1.25rem; }
  .main-content.app-content{ margin-block-start:79px !important; padding-block-start:0 !important; }
}

/* Bouton « Retour » nettement identifiable (pilule blanche, texte navy) */
.btn-retour{
  background:#fff;border:1px solid var(--line);color:var(--primary);font-weight:600;
  border-radius:10px;box-shadow:var(--shadow);
}
.btn-retour:hover,.btn-retour:focus{background:var(--primary-soft);color:var(--primary-d);border-color:var(--primary-soft)}
.app-header .header-content-left,
.app-header .header-content-right{display:flex;align-items:center;min-width:0}
/* le nom ne doit jamais pousser la mise en page : ellipsis sur petit écran */
.app-header .header-content-right .fw-semibold{
  max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Bouton menu (☰) dessiné en CSS — indépendant du JS et des icônes Valex */
.nav-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;cursor:pointer;border-radius:10px;color:var(--ink);
  -webkit-tap-highlight-color:transparent;flex:0 0 auto;
}
.nav-burger:hover{background:var(--primary-soft)}
.nav-burger span,
.nav-burger span:before,
.nav-burger span:after{
  content:"";display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative;
}
.nav-burger span:before{position:absolute;top:-7px}
.nav-burger span:after{position:absolute;top:7px}
/* le ☰ ne sert que < 992px ; au-dessus la sidebar est toujours visible */
@media (min-width:992px){ .nav-burger{display:none} }

/* ---- Flèches de navigation entre documents (#modal-doc) ---- */
.doc-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:64px;display:flex;align-items:center;justify-content:center;
  font-size:34px;line-height:1;color:#fff;cursor:pointer;
  background:rgba(0,0,0,.35);border:none;border-radius:8px;
  -webkit-tap-highlight-color:transparent;transition:background .12s ease;
}
.doc-nav:hover{background:rgba(0,0,0,.6)}
.doc-nav:disabled{opacity:.25;cursor:default}
.doc-nav-prev{inset-inline-start:6px}
.doc-nav-next{inset-inline-end:6px}
@media (max-width:575.98px){
  .doc-nav{width:38px;height:54px;font-size:28px}
}

/* ---- Viewer PDF en modal (#modal-doc) ---- */
.doc-page{background:#fff;max-width:100%}
.doc-page-wrap{position:relative;margin:0 auto;max-width:100%;box-shadow:0 2px 10px rgba(0,0,0,.45);background:#fff}
/* Zones de champs superposées au PDF */
.doc-champ{
  position:absolute;border:2px dashed currentColor;border-radius:3px;
  background:rgba(38,64,122,.10);box-sizing:border-box;min-height:12px;pointer-events:none;
}
.doc-champ-lbl{
  position:absolute;top:0;left:0;max-width:100%;
  font-size:10px;line-height:1.4;font-weight:600;color:#fff;
  padding:0 4px;border-radius:0 0 3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- Page Comptes (/admin/comptes) : tableau -> cartes empilées sur mobile ---- */
@media (max-width:767.98px){
  /* le wrapper ne fait plus la carte : chaque ligne devient sa propre carte */
  .table-card--cards{border:0;box-shadow:none;background:transparent;overflow:visible;padding:0}
  .table-comptes thead{display:none}
  .table-comptes, .table-comptes tbody{display:block;width:100%}
  .table-comptes tr{
    display:block;border:1px solid var(--line);border-radius:12px;
    margin:0 0 12px;padding:6px 14px;background:var(--surface);box-shadow:var(--shadow);
  }
  .table-comptes td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:auto;border:0;padding:9px 0;
  }
  .table-comptes tr td + td{border-top:1px solid var(--line)}
  .table-comptes td::before{
    content:attr(data-label);font-weight:600;color:var(--muted);
    flex:0 0 40%;text-align:left;
  }
  .table-comptes td .cell-nom{font-weight:600;color:var(--ink)}
  .table-comptes td > form{margin:0}
  .table-comptes td .form-select,
  .table-comptes td .btn{width:auto;min-width:130px}
}