/* bo.css — back office du chatbot : composants propres au BO, posés AU-DESSUS de la feuille commune de l'intranet
   (https://chatbot-incyber.com/assets/intranet/intranet.css, jamais copiée ici). Design de l'intranet, sans thème sombre.
   Typographie de Comptes : texte 13 px, titres 19/15 px. Testé de 1920 à 280 px. */

:root{ --warn:#e8962e; --warn-bg:#fbeedb; --warn-ink:#8a4d05; --neutral-bg:#f5f2f2; } /* ambre et gris repris de la To-do */

body{font-size:13px; line-height:1.45;}
code{font-family:ui-monospace, Consolas, monospace; font-size:12px; background:var(--neutral-bg); padding:1px 6px; border-radius:6px;}
.bo-blobs{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1;}

/* --- Mise en page --- */
.bo{width:100%; max-width:1280px; margin:0 auto; padding:0 20px;}
.bo-top{padding-top:16px; display:flex; flex-direction:column; gap:10px;}
.bo-main{padding-top:18px; padding-bottom:48px; display:flex; flex-direction:column; gap:16px;}
.bo h1{font-size:19px; margin:0; letter-spacing:-.01em;}
.bo h2{font-size:15px; margin:0 0 12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.bo h3{font-size:13px; margin:0 0 8px;}
.bo .sub{font-size:13px;}
.bo .card{padding:20px; border-radius:16px;}
.bo .card > :last-child{margin-bottom:0;}
.bo-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.bo-head h2{margin:0;}
.bo-grid-2{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:16px;}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.req{color:var(--red-ink);}

/* --- Barre du haut : retour Portail, état Gemini, compte --- */
.bo .toplinks a, .bo .toplinks .linklike{font-size:13px;}
.bo-gem{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:3px 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel);}
.dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--green);}
.dot.off{background:var(--red);}
.bo-brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.bo-brand span{font-size:12px; color:var(--muted);}

/* --- Navigation entre pages : soulignement (les onglets en pilules restent pour l'intérieur des pages) --- */
.bo-nav{position:relative; display:flex; flex-wrap:wrap; gap:2px 4px; border-bottom:1px solid var(--border);}
.bo-nav a{display:inline-flex; align-items:center; min-height:36px; padding:0 10px; color:var(--muted); font-weight:600; font-size:13px; border-bottom:2px solid transparent; margin-bottom:-1px;}
.bo-nav a:hover{color:var(--text);}
.bo-nav a.on{color:var(--text); border-bottom-color:var(--blue);}
.bo-nav .sep{flex:1 1 auto;}

/* --- Onglets internes (FAQ, périodes du suivi financier) : .tab de l'intranet, état actif posé par le JS --- */
.bo .tabs{gap:6px;}
.bo .tab{min-height:32px; padding:0 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;}
.bo .tab.active{border-color:var(--blue); background:var(--blue-bg); color:var(--blue);}

/* --- Champs : style .field de l'intranet appliqué aux champs bruts des pages --- */
.bo :is(input[type=text], input[type=number], input[type=search], input[type=password], select, textarea){
  width:100%; min-height:36px; padding:0 12px; border:1px solid var(--border); border-radius:10px;
  font:inherit; font-size:13px; color:var(--text); background:#fff;
}
.bo textarea{padding:10px 12px; min-height:110px; resize:vertical; line-height:1.5;}
.bo select{appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756d68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;}
.bo :is(input, select, textarea):focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg);}
.bo input[type=file]{font:inherit; font-size:13px; max-width:100%;}
.bo input[type=checkbox]{accent-color:var(--blue); width:16px; height:16px; vertical-align:-3px; margin:0 6px 0 0;}
.bo .mono{font-family:ui-monospace, Consolas, monospace; font-size:12px;}
.form-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:0 14px;}
.form-group{margin-bottom:14px; min-width:0;}
.form-group > label, .bo label.lbl{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 6px;}
.form-group > label.chk, label.chk{display:inline-flex; align-items:center; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text); min-height:36px; margin:0; cursor:pointer;}
.form-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.form-inline > input, .form-inline > .grow{flex:1 1 200px; width:auto; min-width:0;}
.form-inline > select{flex:0 0 auto; width:auto;}
.inline{display:inline; margin:0;}
.actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}

/* --- Messages (même rendu que .msg-ok / .msg-err de l'intranet) --- */
.alert{padding:10px 12px; border-radius:10px; font-size:13px;}
.alert-success{background:var(--green-bg); color:var(--green-ink);}
.alert-error{background:var(--red-bg); color:var(--red-ink);}
.alert-info{background:var(--blue-bg); color:var(--text);}

/* --- Aide repliable (ex-encadrés jaunes de documentation) --- */
.doc-section{border:1px solid var(--border); border-radius:14px; background:var(--panel); padding:0 16px; color:var(--muted);}
.doc-section > summary{cursor:pointer; padding:12px 0; font-weight:700; color:var(--text); list-style-position:inside;}
.doc-section[open] > summary{margin-bottom:2px;}
.doc-section > :last-child{margin-bottom:14px;}
.doc-section p, .doc-section ul{margin:0 0 8px;}
.doc-section ul{padding-left:18px;}
.example-box{background:var(--neutral-bg); border-radius:10px; padding:10px 12px; margin:8px 0; font-size:12px; color:var(--text);}

/* --- Tableaux --- */
.bo .tbl-wrap{border:1px solid var(--border); border-radius:12px; background:#fff;}
.bo table{width:100%; border-collapse:collapse; font-size:13px;}
.bo th{background:var(--blue-bg); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:left; padding:8px 10px; white-space:nowrap;}
.bo td{padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere;}
.bo tr:last-child td{border-bottom:none;}
.bo tbody tr:hover td{background:#fcfbfa;}
.bo .card > .tbl-wrap{margin-top:4px;}
.num{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* --- Étiquettes (sources, statuts, mots-clés) --- */
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.5; white-space:nowrap; background:var(--neutral-bg); color:var(--muted);}
.pill-blue{background:var(--blue-bg); color:var(--blue);}
.pill-violet{background:var(--violet-bg); color:var(--violet);}
.pill-green{background:var(--green-bg); color:var(--green-ink);}
.pill-red{background:var(--red-bg); color:var(--red-ink);}
.pill-warn{background:var(--warn-bg); color:var(--warn-ink);}
.pill-mono{font-family:ui-monospace, Consolas, monospace; font-weight:600; white-space:normal; overflow-wrap:anywhere;}
.tags{display:flex; flex-wrap:wrap; gap:4px;}

/* --- Liste à défilement (mots-clés, motifs) --- */
.scroll-list{max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:12px; margin-top:14px;}
.list-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid var(--border);}
.list-item:last-child{border-bottom:none;}
.list-item > div:first-child{min-width:0;}

/* --- Fenêtres (FAQ) --- */
.modal{display:none; position:fixed; inset:0; background:rgba(38,34,31,.35); z-index:1000; overflow-y:auto; padding:40px 16px;}
.modal-content{background:#fff; width:100%; max-width:820px; margin:0 auto; padding:22px; border-radius:16px; border:1px solid var(--border); box-shadow:0 24px 48px -12px rgba(38,34,31,.25);}
.modal-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px;}
.modal-header h3{margin:0; font-size:15px;}
.close-btn{background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:4px 8px; border-radius:8px;}
.close-btn:hover{color:var(--text); background:var(--neutral-bg);}

/* --- Indicateurs (Dashboard) --- */
.bo .kpis{grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));}
.bo .kpi b{font-size:22px; font-variant-numeric:tabular-nums; margin:2px 0;}
.bo .kpi .k-lbl{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}

.empty{color:var(--muted); padding:16px; text-align:center;}

/* --- Écrans étroits --- */
@media (max-width:900px){
  .bo :is(input[type=text], input[type=number], input[type=search], input[type=password], select, textarea){font-size:16px;} /* pas de zoom iOS */
}
@media (max-width:600px){
  .bo{padding-left:12px; padding-right:12px;}
  .bo-nav{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;} /* une ligne qui défile ; l'onglet actif est ramené en vue (_nav.php) */
  .bo-nav::-webkit-scrollbar{display:none;}
  .bo-nav a{flex:0 0 auto; white-space:nowrap;}
  .bo-nav .sep{flex:0 0 12px;}
  .bo .card{padding:14px; border-radius:14px;}
  .modal{padding:12px 8px;}
  .modal-content{padding:16px;}
}
@media (max-width:360px){
  .bo{padding-left:8px; padding-right:8px;}
  .bo .card{padding:12px;}
  .bo-nav a{padding:0 7px;}
}