/* ═══════════════════════════════════════════════════════════════════════════
   AFFICHAGE ADAPTATIF — chargé en dernier, après toutes les autres feuilles.
   Rien n'est modifié sur grand écran (> 1280 px) en dehors de la barre de recherche ;
   en dessous, chaque écran s'adapte : grilles qui passent sur moins de colonnes, barres
   d'outils qui vont à la ligne, tableaux qui défilent dans leur cadre plutôt que de
   sortir de l'écran. Objectif : rien de coupé, quelle que soit la taille de l'écran.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Toutes tailles ---------------------------------------------------- */
/* Le champ de recherche gardait sa largeur « naturelle » et débordait de sa pastille
   (le bouton Imprimer passait par-dessus « Ctrl+K »). */
.search-box{min-width:0;}
.search-box input{min-width:0;width:100%;}
/* Un élément de grille ne doit jamais forcer sa colonne à s'élargir au-delà de l'écran. */
.dash-grid > *, .stat-grid > *, .pv-grid2 > *, .cl-layout > *, .cl-req-layout > *, .oc-poles-grid > *{min-width:0;}
.content img:not(.oc-av){max-width:100%;}
.modal-body{overflow-wrap:anywhere;}
.panel{min-width:0;}
/* Cases à cocher / boutons radio placés dans un formulaire : la règle générale des champs
   (« largeur 100 % », libellé en majuscules au-dessus) les étirait et rejetait le texte en
   dessous (choix des responsables dans l'onglet Équipe, règles du classeur…). */
.field input[type="checkbox"], .field input[type="radio"]{width:auto;padding:0;margin:0;border:0;flex-shrink:0;display:inline-block;accent-color:var(--emerald);}
.field label.checkbox-item, .field label.cl-checklist-item, .field label.org-manager-check-row,
.field label:has(> input[type="checkbox"]), .field label:has(> input[type="radio"]){
  display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:500;font-size:13.3px;color:var(--text);margin-bottom:2px;}
.modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea{max-width:100%;min-width:0;}

/* ---- Portables et petits écrans de bureau (≤ 1280 px) ------------------- */
@media (max-width:1100px){
  .content{padding:22px 20px 60px;}
  /* 6 cartes de chiffres sur une ligne : trop serré → autant de colonnes que la place permet. */
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;}
  .search-box{width:220px;}
}

/* ---- Tablettes (≤ 1100 px) --------------------------------------------- */
@media (max-width:1180px){
  .dash-grid{grid-template-columns:1fr;}
}
@media (max-width:1100px){
  .oc-hint{display:none;}
  .oc-drawer{width:280px;}
}

/* ---- Tablettes portrait et téléphones (≤ 980 px, menu latéral replié) --- */
@media (max-width:980px){
  #global-search-kbd-hint{display:none !important;}
  .topbar{gap:4px;}
  .topbar .icon-btn{padding:7px;}
  .search-box{width:auto;flex:1 1 auto;padding:7px 12px;}
  /* Les barres d'onglets et d'outils passent à la ligne au lieu de sortir de l'écran. */
  .tabs-row, .view-toggle, .cal-toolbar, .oc-bar, .oc-top, .oc-actions, .cl-toolbar, .pv-head, .pv-tabs{flex-wrap:wrap;}
  .tabs-row{row-gap:4px;}
  /* Tableaux larges : ils défilent dans leur propre cadre. */
  .content table{max-width:100%;}
  .table-wrap, .pv-table-wrap, .pv-charge-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .oc-stats > div{padding:7px 11px;}
  .oc-stats b{font-size:17px;}
}

/* ---- Téléphones (≤ 640 px) --------------------------------------------- */
@media (max-width:640px){
  .content{padding:12px 10px 80px;}
  .panel{padding:14px;}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  .stat-card{padding:12px 12px 10px;}
  .stat-card .num{font-size:22px;}
  .stat-card .lbl{font-size:11.5px;overflow-wrap:anywhere;}
  .topbar{padding:0 8px;}
  .topbar .icon-btn{padding:6px;}
  .topbar .icon-btn svg{width:18px;height:18px;}
  .search-box{padding:7px 10px;gap:6px;}
  .search-box input{font-size:13px;}
  .btn{white-space:normal;}
  .pv-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .oc-search{min-width:0;flex:1 1 100%;max-width:none;}
  .oc-bar select{flex:1 1 100%;}
  .oc-viewport{height:calc(100vh - 330px);min-height:360px;}
}

/* ---- Très petits téléphones (≤ 380 px) --------------------------------- */
@media (max-width:380px){
  #print-btn{display:none !important;}
  .stat-card .num{font-size:20px;}
}

/* ---- Compléments écran par écran (téléphones) --------------------------- */
@media (max-width:640px){
  .panel > table, .panel > .simple, .content table.simple{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pv-bars{gap:2px;}
  .pv-bar{min-width:0;}
}
@media (max-width:640px){
  /* Valeurs au-dessus des barres mensuelles : écrites à la verticale pour ne pas se chevaucher. */
  .pv-bars{height:210px;}
  .pv-bar-v{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;min-height:34px;}
  .pv-bar-m{font-size:9.5px;}
}
@media (max-width:640px){
  /* Vue Semaine du calendrier : 7 colonnes lisibles, que l'on fait défiler du doigt
     (l'en-tête, la bande « Sans horaire » et la grille défilent ensemble). */
  .ctg[data-numdays="7"]{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ctg[data-numdays="7"] > *{min-width:660px;}
  .cal-chip{padding:2px 4px;font-size:10.5px;}
}
/* Écrans moyens avec le menu latéral ouvert : la place restante est celle d'une tablette. */
@media (max-width:1180px){
  .pv-grid2{grid-template-columns:1fr;}
}
@media (max-width:1260px){
  .task-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
.cl-levels{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.cl-levels > *, .cl-prep > *, .cl-suivi-stats > *{min-width:0;}
@media (min-width:981px) and (max-width:1100px){
  .cl-layout{grid-template-columns:240px minmax(0,1fr);}
}
/* Barre du haut entre 981 et 1280 px (menu latéral visible) : on garde la recherche
   utilisable et le bouton « + Nouvelle tâche » sur une seule ligne. */
@media (max-width:1100px){
  #global-search-kbd-hint{display:none !important;}
  .topbar{gap:8px;padding:0 16px;}
  .topbar h2{white-space:nowrap;font-size:17px;}
  #new-task-btn{white-space:nowrap;flex-shrink:0;}
  .search-box{flex:1 1 160px;width:auto;max-width:300px;}
}
@media (max-width:640px){
  .content input:not([type="checkbox"]):not([type="radio"]), .content select, .content textarea{max-width:100%;}
  .cl-levels{grid-template-columns:minmax(0,1fr);}
  .cl-layout, .cl-req-layout{grid-template-columns:minmax(0,1fr) !important;}
  .cl-node-tools{opacity:1;}
  .cl-node-main, .cl-point-main, .cl-level{min-width:0;}
  .cl-chip{max-width:100%;flex-wrap:wrap;}
  .cl-addpoint, .cl-section-head, .cl-hist-filters, .pv-table-tools, .cl-m-add, .cl-pp-new-row{flex-wrap:wrap;}
  .cl-addpoint input[type="text"], .cl-hist-filters input[type="search"], .pv-table-tools input[type="search"],
  .cl-m-add input, .cl-pp-new-row input, .cl-pp-new-row select{min-width:0;flex:1 1 100%;}
  .cl-section-head h4{min-width:0;overflow-wrap:anywhere;}
  .cl-m-row > span, .cl-trash-main, .cl-session-past-main, .cl-row-main{min-width:0;}
  .cl-rule-fixed{flex:1 1 100%;max-width:none;}
  .cl-req-person span:first-child{min-width:0;}
  .pv-acc-row{grid-template-columns:minmax(0,1fr);}
  .pv-charge tbody th{min-width:120px;}
}
/* Écran de connexion : le lien « Vous êtes un client du cabinet ? … » va à la ligne. */
#client-portal-link{white-space:normal;}

/* ---- Zones de saisie des messages (discussions, commentaires) ----------- */
/* Champ sur plusieurs lignes : Maj+Entrée va à la ligne, la zone grandit avec le texte. */
textarea.msg-input{flex:1;min-width:0;resize:none;overflow-y:auto;font:inherit;font-size:13.5px;line-height:1.45;
  padding:9px 14px;border:1.5px solid var(--border);border-radius:18px;background:var(--card);color:var(--text);
  min-height:40px;max-height:40vh;box-sizing:border-box;}
textarea.msg-input:focus{outline:none;border-color:var(--emerald);}
.chat-input-row, .comment-input-row, .qc-input-row{align-items:flex-end;}
.cm-edit-row textarea.msg-input{width:100%;border-radius:10px;}
/* Les retours à la ligne des messages envoyés sont conservés à l'affichage. */
.comment .cx, .qc-msg-text, .cm-text{white-space:pre-wrap;overflow-wrap:anywhere;}

/* ---- Recherche globale : résultats plus lisibles ------------------------- */
/* La liste s'élargit au besoin (vers la gauche) pour que les titres ne soient plus réduits
   à « Point… » ; le détail (pôle, auteur…) passe à la ligne s'il est long. */
@media (min-width:981px){
  #global-search-results{left:auto;right:0;width:max(100%, 460px);max-height:min(520px, 70vh);}
}
#global-search-results .gs-item{flex-wrap:wrap;row-gap:2px;}
#global-search-results .gs-sub{flex-shrink:1;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#global-search-results .gs-title{flex:1 1 140px;}

/* ---- Aide des raccourcis clavier (touche « ? ») -------------------------- */
.kb-table{width:100%;border-collapse:collapse;font-size:13.3px;}
.kb-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);padding:14px 0 6px;}
.kb-table td{padding:6px 0;border-bottom:1px solid var(--border);vertical-align:middle;}
.kb-table td:first-child{white-space:nowrap;padding-right:16px;width:1%;}
.kb-key{display:inline-block;min-width:22px;text-align:center;padding:2px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:var(--paper);font-family:var(--font-mono);font-size:11.5px;color:var(--text);}

/* ---- Session expirée : reconnexion sans quitter la page ------------------ */
.reauth-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(15,20,28,.55);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px);}
.reauth-card{width:100%;max-width:380px;background:var(--card);color:var(--text);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;display:flex;flex-direction:column;gap:10px;}
.reauth-card h3{margin:0;font-family:var(--font-display);font-size:18px;}
.reauth-card p{margin:0 0 4px;font-size:13.3px;color:var(--text-muted);line-height:1.5;}
.reauth-card input{width:100%;box-sizing:border-box;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font:inherit;}
.reauth-card input:focus{outline:none;border-color:var(--emerald);}
.reauth-card .reauth-user{background:var(--grey-light);color:var(--text-muted);}
.reauth-err{color:var(--brick);font-size:12.5px;}
.reauth-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}