/* Copyright (C) 2026 Siliteo / eighteen-ai
 *
 * Styles de la boite a idees.
 *
 * ATTENTION : ce fichier est declare dans module_parts['css'], donc charge sur TOUTES
 * les pages de Dolibarr. Tout ce qui n'est pas la pastille de menu doit rester
 * prefixe .ideabox- et ne jamais toucher aux selecteurs du theme, sinon on casse des
 * ecrans qui n'ont rien a voir avec le module.
 */

/* ------------------------------------------------ pastille du menu haut (globale) */
.ideabox-badge {
	/* Posee en absolu sur le <li> du menu (voir js/menu.js) : dans le flux, elle
	   recouvrait le libelle "Boite a idees". */
	position: absolute;
	top: 0;
	right: 2px;
	z-index: 5;
	min-width: 16px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
	color: #fff;
	background: #d35400;
	border-radius: 8px;
	pointer-events: none;   /* ne vole pas le clic destine a l'entree de menu */
}

/* ------------------------------------------------ liste */
.ideabox-banner {
	margin: 8px 0;
	padding: 8px 12px;
	border-left: 3px solid #d35400;
	background: rgba(211, 84, 0, .07);
	border-radius: 3px;
}
.ideabox-row-new td { font-weight: 600; }
.ideabox-tag-new {
	display: inline-block;
	padding: 0 5px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	background: #d35400;
	border-radius: 3px;
	vertical-align: middle;
}
.ideabox-voted { font-weight: bold; color: #1a7f37; }

/* ------------------------------------------------ fiche */
.ideabox-banner-ref {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(128, 128, 128, .25);
}
.ideabox-banner-reftxt { font-family: monospace; opacity: .7; }
.ideabox-banner-title { font-size: 1.25em; font-weight: 600; }

.ideabox-content-wrap { margin: 14px 0; }
.ideabox-content-head {
	margin-bottom: 6px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: .85em;
	letter-spacing: .04em;
	opacity: .65;
}
.ideabox-content {
	padding: 14px 16px;
	background: rgba(128, 128, 128, .05);
	/* Un contenu colle depuis Word peut arriver sans <p> englobant : sans cette ligne,
	   son texte hériterait d'un ancêtre du theme et resterait noir en mode sombre. */
	color: var(--colortext, inherit);
	border: 1px solid rgba(128, 128, 128, .2);
	border-radius: 4px;
	line-height: 1.55;
	/* Le corps vient d'un WYSIWYG : il peut contenir un tableau large ou une URL
	   interminable, qui sans ca debordent de la fiche. */
	overflow-wrap: break-word;
}
.ideabox-content table { max-width: 100%; }
.ideabox-content :first-child { margin-top: 0; }
.ideabox-content :last-child { margin-bottom: 0; }

/* ------------------------------------------------ barre d'assistance Claude */
.ideabox-aibar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 7px 10px;
	background: rgba(128, 128, 128, .07);
	border: 1px solid rgba(128, 128, 128, .22);
	border-radius: 4px;
}
.ideabox-aibar-label {
	margin-right: 4px;
	font-size: .85em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .7;
}
.ideabox-aibar-off {
	border-color: rgba(211, 84, 0, .4);
	background: rgba(211, 84, 0, .07);
}
.ideabox-ai-state { font-size: .9em; }
.ideabox-ai-error { color: #b04; font-size: .9em; }

.ideabox-aiproposal {
	margin-top: 10px;
	border: 1px solid #3a7bd5;
	border-radius: 4px;
	overflow: hidden;
}
.ideabox-aiproposal-head {
	padding: 6px 10px;
	font-size: .85em;
	font-weight: 600;
	color: #fff;
	background: #3a7bd5;
}
.ideabox-aiproposal-body {
	padding: 12px 14px;
	line-height: 1.55;
	max-height: 340px;
	overflow-y: auto;
}
.ideabox-aiproposal-actions {
	padding: 8px 10px;
	border-top: 1px solid rgba(128, 128, 128, .25);
	background: rgba(128, 128, 128, .05);
}

/* ------------------------------------------------ decision du responsable */
.ideabox-decide {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid rgba(128, 128, 128, .25);
	border-left: 3px solid #3a7bd5;
	border-radius: 3px;
}
.ideabox-decide-head { margin-bottom: 8px; font-weight: 600; }

/* ------------------------------------------------ fil de discussion */
.ideabox-thread { margin: 18px 0; }
.ideabox-thread-head {
	margin-bottom: 8px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: .85em;
	letter-spacing: .04em;
	opacity: .65;
}
.ideabox-messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 420px;
	padding: 12px;
	overflow-y: auto;
	background: rgba(128, 128, 128, .05);
	border: 1px solid rgba(128, 128, 128, .2);
	border-radius: 4px;
}
.ideabox-msg {
	align-self: flex-start;
	max-width: 76%;
	padding: 7px 11px;
	/* Couleurs prises dans les variables du theme Dolibarr plutot qu'en dur : elles
	   sont redefinies en mode sombre, donc les bulles suivent sans qu'on ait a deviner
	   le nom de la classe que le theme ajoute (il n'y en a pas de fiable). */
	background: var(--colorbackbody, #fff);
	color: var(--colortext, inherit);
	border: 1px solid rgba(128, 128, 128, .25);
	border-radius: 12px 12px 12px 3px;
}
/* Ses propres messages a droite, comme dans une messagerie : on voit d'un coup d'oeil
   qui parle sans lire les noms. */
.ideabox-msg-own {
	align-self: flex-end;
	/* Teinte TRANSLUCIDE : posee sur le fond du theme, elle donne un bleu clair en
	   theme clair et un bleu profond en sombre. Une couleur opaque ne pourrait pas. */
	background: rgba(58, 123, 213, .15);
	border-color: rgba(58, 123, 213, .35);
	border-radius: 12px 12px 3px 12px;
}
.ideabox-msg-meta { margin-bottom: 3px; font-size: .8em; }
.ideabox-msg-body { line-height: 1.45; overflow-wrap: break-word; }
.ideabox-msg-del { margin-left: 6px; text-decoration: none; opacity: .35; }
.ideabox-msg-del:hover { opacity: 1; color: #b04; }
.ideabox-empty { align-self: center; padding: 10px; }

.ideabox-compose {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	margin-top: 8px;
}
.ideabox-compose-input {
	flex: 1;
	min-height: 38px;
	padding: 8px 10px;
	background: var(--inputbackgroundcolor, #fff);
	color: var(--inputcolor, inherit);
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 4px;
	resize: vertical;
	font: inherit;
}

/* ------------------------------------------------ ecran intermediaire */
.ideabox-suggest { max-width: 900px; margin: 0 auto; }
.ideabox-suggest-recap { margin-bottom: 16px; }
.ideabox-suggest-intro { margin-bottom: 10px; line-height: 1.5; }
.ideabox-suggest-list { list-style: none; margin: 0; padding: 0; }
.ideabox-suggest-list li {
	margin-bottom: 7px;
	padding: 10px 12px;
	border: 1px solid rgba(128, 128, 128, .25);
	border-radius: 4px;
}
.ideabox-suggest-list li:hover { background: rgba(58, 123, 213, .06); }
.ideabox-suggest-list label { display: block; cursor: pointer; }
.ideabox-suggest-detail { margin: 4px 0 0 22px; line-height: 1.45; opacity: .8; }
.ideabox-suggest-wait { display: flex; align-items: center; gap: 8px; padding: 14px; }

.ideabox-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(128, 128, 128, .3);
	border-top-color: #3a7bd5;
	border-radius: 50%;
	animation: ideabox-spin .8s linear infinite;
}
@keyframes ideabox-spin { to { transform: rotate(360deg); } }

/* Plus de regles ".dark" : elles ne se declenchaient jamais (Dolibarr n'ajoute pas
   cette classe). Le suivi du theme passe desormais par ses variables CSS, ci-dessus. */