/* +--------------------------------------------------------------------------+
// ? 2002-2013 PMB Services / www.sigb.net pmb@sigb.net et contributeurs (voir www.sigb.net)
// +-------------------------------------------------+
// $Id: demand.css,v 1.1.2.3 2026/08/14 08:40:20 dbellamy Exp $ */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

/*                            Notes Dialogue                                  */

/* ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------*/

#dialog_wrapper {
	width: 100%;
	height: 350px;
	overflow: auto;
	padding-right: 15px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
}

.note_gest p {
	color: #fff;
}

.note_opac p {
	color: #fff;
}

.note_gest {
	background: rgb(104, 196, 127);
	background: -moz-linear-gradient(top, rgba(104, 196, 127, 1) 0%, rgba(82, 192, 115, 1) 30%, rgba(67, 167, 115, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(104, 196, 127, 1)), color-stop(30%, rgba(82, 192, 115, 1)), color-stop(100%, rgba(67, 167, 115, 1)));
	background: -webkit-linear-gradient(top, rgba(104, 196, 127, 1) 0%, rgba(82, 192, 115, 1) 30%, rgba(67, 167, 115, 1) 100%);
	background: -o-linear-gradient(top, rgba(104, 196, 127, 1) 0%, rgba(82, 192, 115, 1) 30%, rgba(67, 167, 115, 1) 100%);
	background: -ms-linear-gradient(top, rgba(104, 196, 127, 1) 0%, rgba(82, 192, 115, 1) 30%, rgba(67, 167, 115, 1) 100%);
	background: linear-gradient(to bottom, rgba(104, 196, 127, 1) 0%, rgba(82, 192, 115, 1) 30%, rgba(67, 167, 115, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68c47f', endColorstr='#43a773', GradientType=0);
	max-width: 69%;
	padding: 10px 10px 0px 15px;
	border-radius: 0px 18px 18px 18px;
	border: solid 1px rgb(60, 153, 89);
	box-shadow: 2px 2px 2px 0px rgb(39, 102, 59);
	margin: 5px 0px 15px;
	position: relative;
	text-align: right;
}

.note_opac {
	background: rgb(104, 168, 196);
	background: -moz-linear-gradient(top, rgba(104, 168, 196, 1) 0%, rgba(82, 154, 192, 1) 30%, rgba(67, 114, 167, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(104, 168, 196, 1)), color-stop(30%, rgba(82, 154, 192, 1)), color-stop(100%, rgba(67, 114, 167, 1)));
	background: -webkit-linear-gradient(top, rgba(104, 168, 196, 1) 0%, rgba(82, 154, 192, 1) 30%, rgba(67, 114, 167, 1) 100%);
	background: -o-linear-gradient(top, rgba(104, 168, 196, 1) 0%, rgba(82, 154, 192, 1) 30%, rgba(67, 114, 167, 1) 100%);
	background: -ms-linear-gradient(top, rgba(104, 168, 196, 1) 0%, rgba(82, 154, 192, 1) 30%, rgba(67, 114, 167, 1) 100%);
	background: linear-gradient(to bottom, rgba(104, 168, 196, 1) 0%, rgba(82, 154, 192, 1) 30%, rgba(67, 114, 167, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68a8c4', endColorstr='#4372a7', GradientType=0);
	max-width: 69%;
	padding: 10px 10px 0px 15px;
	border-radius: 18px 0px 18px 18px;
	border: solid 1px rgb(74, 117, 167);
	box-shadow: -2px 2px 2px 0px #355B88;
	margin: 5px 0px 15px 30%;
	position: relative;
}

.entete_note {
	margin-bottom: 5px;
}

.entete_note {
	margin-bottom: 4px;
	color: #26364D;
	font-weight: 700;
}

.bulle {
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    clear: both;
    max-width: 75%;
}

.bulle::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ffffff transparent transparent;
}

.bulle_gest {
    background-color: #34C759; /* vert */
    color: #ffffff;
    align-self: flex-start;
}

.bulle_gest::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #34C759 transparent transparent;
}

.bulle_opac {
    background-color: #56B3FA; /* bleu */
    color: #ffffff;
    align-self: flex-end;
}

.bulle_opac::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color: transparent transparent transparent #56B3FA;
}

.bulle-texte {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}

.bulle-heure {
    font-size: 12px;
    color: #444;
    margin-top: 5px;
}

.container_bulle {
    display: flex;
    flex-direction: column;
}

#dialog_wrapper input[type="image"] {
	height: 16px;
	width: 16px;
	border: none;
}

.btn_note {
    float: right;
	top: 0px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 8px;
}

.btn_note input[type="image"] {
	box-shadow: 0px 0px 0px #734D2B inset;
}

.note_opac .btn_note {
	right: 16px;
}

.note_gest .btn_note {
	left: 16px;
}

form[name="modif_notes"], .form_modif_notes {
	height: 40%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
}

form[name="modif_notes"] textarea, .form_modif_notes textarea {
	float: left;
	margin-top: 10px;
	padding: 0;
	top: 0px;
	width: 65%;
}

form[name="modif_notes"] input, .form_modif_notes input {
	margin-top: 10px;
}

/* ---------------------------------------------------------------------------*/

/*            Liste des demandes en accordeon (demandes_display_mode = 2)     */

/* Les styles de structure de l'accordeon viennent de accordion.css ; les     */
/* bulles de discussion reutilisent les classes definies plus haut.           */

/* ---------------------------------------------------------------------------*/

#demandesList .demande-accordion-item {
	margin-bottom: 4px;
}

/* Meme mise en evidence que le gras du tableau : la demande porte des notes
   ou des actions qui n'ont pas encore ete consultees. Le gras ne porte que sur
   l'intitule : le badge et la date gardent leur graisse propre. */
#demandesList .demande-accordion-unread .demande-accordion-titre {
	font-weight: 700;
}

/* En-tete : intitule a gauche, badge d'etat puis date a droite, sur le modele
   de l'Opac (opac_css/styles/common/demandes_sp.css). Le chevron d'accordion.css
   etant positionne en absolu pres du bord droit du declencheur, une reserve de
   place a droite evite qu'il ne chevauche la date. */
#demandesList .demande-accordion-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 2em;
}

/* Bloc de gauche : intitule sur une ligne, theme et type en sous-titre. */
#demandesList .demande-accordion-body {
	flex: 1 1 auto;
	min-width: 0;
}

#demandesList .demande-accordion-titre {
	display: block;
}

#demandesList .demande-accordion-meta {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: #777;
}

/* Le separateur entre theme et type est un element a part entiere : les
   espaces du markup ne survivent pas a la compilation du template. */
#demandesList .demande-accordion-meta span + span {
	margin-left: 4px;
}

#demandesList .demande-accordion-date {
	flex: 0 0 auto;
	font-size: 12px;
	color: #777;
	white-space: nowrap;
}

/* Priorite reprise dans l'en-tete : meme geometrie que le badge d'etat, mais en
   gris neutre. Les deux informations se tiennent cote a cote et ne doivent pas
   se confondre ; la couleur reste au seul etat, qui suit le workflow. */
#demandesList .demande-accordion-priorite {
	flex: 0 0 auto;
	display: inline-block;
	padding: 2px 9px;
	border-radius: 50px;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* Badge d'etat : memes formes et memes couleurs qu'en Opac, pour que les deux
   interfaces parlent le meme langage visuel. Les suffixes de classe sont les
   noms d'etat du workflow (includes/demandes/workflow.xml). */
#demandesList .status-badge {
	flex: 0 0 auto;
	display: inline-block;
	padding: 2px 9px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

#demandesList .status-todo       { color: #2563eb; background: #dbeafe; }
#demandesList .status-validate   { color: #d97706; background: #fef3c7; }
#demandesList .status-refused    { color: #dc2626; background: #fee2e2; }
#demandesList .status-finished   { color: #16a34a; background: #dcfce7; }
#demandesList .status-givenup    { color: #6b7280; background: #f3f4f6; }
#demandesList .status-classified { color: #6b7280; background: #f3f4f6; }

#demandesList .demande-accordion-details dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-column-gap: 15px;
	grid-row-gap: 3px;
	margin: 0 0 10px 0;
}

#demandesList .demande-accordion-details dt {
	font-weight: 700;
	margin: 0;
}

#demandesList .demande-accordion-details dd {
	margin: 0;
}

/* Attribution : meme disposition que le changement d'etat. Les gestionnaires
   designes precedent le selecteur qui les ajoute, et la ligne se poursuit a la
   suivante quand ils sont nombreux. */
#demandesList .demande-accordion-assign {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px 0;
}

#demandesList .demande-accordion-assign label {
	font-weight: 700;
}

/* Etiquette d'un gestionnaire designe : meme pilule que le nom du fichier
   choisi avant envoi (cf demande-accordion-file-chip), la notion etant la meme,
   celle d'un element retirable de la composition en cours. */
#demandesList .demande-accordion-assign-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 50px;
	background: #dbeafe;
	color: #064d85;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* Pastille de retrait : reprise de celle des bulles du fil, sans son cadre, le
   fond de l'etiquette en tenant lieu. */
#demandesList .demande-accordion-assign-remove {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

#demandesList .demande-accordion-assign-remove:hover {
	color: #a02c35;
}

#demandesList .demande-accordion-assign-remove:disabled {
	cursor: default;
	opacity: 0.5;
}

/* Le selecteur ne s'etire pas a la largeur du panneau : les noms des
   gestionnaires sont courts, et une liste plus large qu'eux se lit moins bien. */
#demandesList .demande-accordion-assign select {
	max-width: 300px;
}

/* Validation et abandon de l'attribution comme du changement d'etat. Le
   pictogramme porte son propre cercle : la pastille n'a ni fond ni cadre, a la
   difference de celles des bulles du fil, qui se detachent d'un contenu.
   Les deux couleurs sont celles des badges d'etat, seule palette du module. */
#demandesList .demande-accordion-confirm,
#demandesList .demande-accordion-revert {
	padding: 0;
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

#demandesList .demande-accordion-confirm {
	color: #16a34a;
}

#demandesList .demande-accordion-confirm:hover,
#demandesList .demande-accordion-confirm:focus {
	color: #15803d;
}

#demandesList .demande-accordion-revert {
	color: #6b7280;
}

/* L'abandon ne se signale en rouge qu'au survol : au repos, il n'y a rien
   d'alarmant a renoncer a une saisie non enregistree. */
#demandesList .demande-accordion-revert:hover,
#demandesList .demande-accordion-revert:focus {
	color: #dc2626;
}

#demandesList .demande-accordion-confirm:disabled,
#demandesList .demande-accordion-revert:disabled {
	color: #c8c8c8;
	cursor: default;
}

/* Changement d'etat : libelle, selecteur des transitions permises et les deux
   pastilles sur une meme ligne, comme sur la fiche de gestion ou le changement
   d'etat precede les autres actions. */
#demandesList .demande-accordion-states {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px 0;
}

#demandesList .demande-accordion-states label {
	font-weight: 700;
}

/* Barre d'actions : l'espacement est porte par le conteneur plutot que par les
   liens, les boutons devant s'espacer de la meme facon. Le retour a la ligne est
   permis, la barre reprenant toutes les actions de la fiche de gestion. */
#demandesList .demande-accordion-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 15px;
}

/* Suppression de la demande : le bouton porte la classe bouton du module, son
   apparence vient donc du theme. Il est renvoye a l'oppose des liens, comme
   dans la fiche de gestion ou il occupe seul le bord droit. */
#demandesList .demande-accordion-delete {
	margin-left: auto;
}

/* Separateur entre les donnees de la demande et le fil des notes. Seule la
   marge est reprise : l'aspect du trait est celui que le theme donne a tous les
   separateurs de l'interface. */
#demandesList .demande-accordion-separator {
	margin: 10px 0 0 0;
}

#demandesList .demande-accordion-timeline {
	margin-top: 10px;
}

/* Fil de discussion : meme presentation qu'en Opac (cf
   opac_css/styles/common/demandes_sp.css), a une difference pres, les cotes sont
   inverses. En gestion, les notes du gestionnaire sont a gauche et celles du
   demandeur a droite : la liste se lit du point de vue de qui traite la demande.
   Toutes ces regles sont portees par #demandesList : les bulles de l'affichage
   des notes en pleine page gardent leur presentation d'origine, definie plus
   haut dans ce fichier. */
#demandesList .chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0;
}

#demandesList .container_bulle {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#demandesList .bulle {
	display: block;
	position: relative;
	max-width: 65%;
	/* Largeur minimale imposee par la rangee de pastilles, qui est positionnee
	   par rapport au bord droit de la bulle : sur un contenu tres court, elle
	   depasserait a gauche. Le cas le plus large est celui d'une note de
	   gestion, cinq pastilles de 18px separees de 3px, soit 102px, decalees de
	   6px du bord droit. En ajoutant 6px de marge a gauche et les deux bordures
	   de 2px, la bulle ne peut pas descendre sous 118px : on retient 120px.
	   Les bulles de pieces jointes suivent la meme largeur, le fil restant
	   ainsi regulier. */
	min-width: 120px;
	margin: 0;
	padding: 9px 13px;
	/* Bordure transparente de la meme epaisseur que le lisere des notes privees.
	   Elle egalise les dimensions de toutes les bulles, et surtout la position
	   des pastilles : celles-ci sont placees par rapport a la boite de padding,
	   qu'une bordure decale. */
	border: solid 2px transparent;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.55;
	color: #222222;
}

/* Les bulles du module portent une queue en ::before : la presentation de
   l'Opac s'en passe, le coin carre suffit a designer l'auteur. */
#demandesList .bulle::before,
#demandesList .bulle_gest::before,
#demandesList .bulle_opac::before {
	content: none;
}

/* Cote inverse de celui de l'Opac : le gestionnaire ecrit a gauche. */
#demandesList .bulle_gest {
	align-self: flex-start;
	background: #e2f5ea;
	border-radius: 0 6px 6px 6px;
}

#demandesList .bulle_opac {
	align-self: flex-end;
	background: #dbeafe;
	border-radius: 6px 0 6px 6px;
}

/* Le contenu d'une note est saisi en texte libre : les retours a la ligne
   doivent etre restitues, l'interpolation ne produisant aucun balisage. */
#demandesList .bulle-text {
	margin: 0;
	white-space: pre-wrap;
}

#demandesList .bulle-heure {
	margin: 0;
	font-size: 11px;
	color: #777777;
}

#demandesList .bulle-heure-gest {
	align-self: flex-start;
}

#demandesList .bulle-heure-opac {
	align-self: flex-end;
	text-align: right;
}

/* Piece jointe : le nom du fichier est un lien, precede d'un pictogramme de
   telechargement. La marge haute vaut celle des notes, pour que la pastille a
   cheval sur le bord ne mange pas le lien. */
#demandesList .demande-accordion-file-bubble {
	padding: 9px 13px 8px 13px;
}

#demandesList .demande-accordion-file-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #064d85;
	font-weight: 600;
	text-decoration: none;
}

#demandesList .demande-accordion-file-link:hover {
	text-decoration: underline;
}

/* Modification d'une note en place. La bulle s'elargit le temps de la saisie :
   la largeur maximale des bulles suffit a peine a un champ de texte. */
#demandesList .demande-accordion-bulle-edit textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 13px;
}

/* Les deux pastilles ferment le bloc de saisie par le bas, du cote du bord ou se
   tiennent celles de la bulle : le regard y revient apres avoir parcouru le
   texte. */
#demandesList .demande-accordion-bulle-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin: 5px 0 0 0;
}

/* Dans une bulle, les pastilles de validation s'alignent sur la taille de celles
   du fil plutot que sur celle des barres de la demande : le texte y est plus
   petit, et les memes pictogrammes y paraitraient enormes. */
#demandesList .demande-accordion-bulle-edit-actions .demande-accordion-confirm,
#demandesList .demande-accordion-bulle-edit-actions .demande-accordion-revert {
	font-size: 17px;
}

/* Une note privee n'est pas visible du demandeur : le trait discontinu la
   distingue sans lui donner une couleur de plus. */
#demandesList .demande-accordion-bulle-prive {
	border: dashed 2px #908356;
}

/* Actions sur un element du fil : une rangee de pastilles a cheval sur le bord
   superieur de la bulle, coupees en deux par le trait. Le decalage vaut la
   moitie de leur hauteur (9px) plus l'epaisseur de la bordure (2px) : un
   element positionne en absolu se place par rapport a la boite de padding, or
   la bordure l'ecarte d'autant du bord visible. Le retrait a droite les
   maintient dans l'emprise de la bulle. */
#demandesList .demande-accordion-bulle-actions {
	position: absolute;
	top: -11px;
	right: 6px;
	display: flex;
	gap: 3px;
}

#demandesList .demande-accordion-bulle-action {
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	color: #777777;
	font-family: inherit;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	cursor: pointer;
}

#demandesList .demande-accordion-bulle-action .fa {
	font-size: 12px;
	line-height: 18px;
}

#demandesList .demande-accordion-bulle-action:hover,
#demandesList .demande-accordion-bulle-action:focus {
	background: #e8e8e8;
	color: #222222;
}

/* Bascule active : l'infobulle nommant l'action a venir, c'est la couleur qui
   souligne l'etat present, en renfort du pictogramme. */
#demandesList .demande-accordion-bulle-action-on {
	background: #b2a57a;
	color: #ffffff;
}

/* Etat actif ET survole. Sans cette regle, la teinte grise du survol
   l'emporterait sur le beige, plus specifique qu'elle : le bouton garde le
   focus apres un clic, et le changement d'etat ne se verrait qu'apres avoir
   clique ailleurs. Le beige sombre du module conserve la lisibilite de l'etat
   tout en signalant le survol. */
#demandesList .demande-accordion-bulle-action-on:hover,
#demandesList .demande-accordion-bulle-action-on:focus {
	background: #908356;
	color: #ffffff;
}

/* La suppression, seule action irreversible, se signale en rouge au survol. Son
   pictogramme occupe toute la pastille : le cercle de fa-times-circle se
   confond alors avec elle, ce qui la distingue des bascules. */
#demandesList .demande-accordion-bulle-action-delete .fa {
	font-size: 17px;
	line-height: 18px;
}

#demandesList .demande-accordion-bulle-action-delete:hover,
#demandesList .demande-accordion-bulle-action-delete:focus {
	background: #fee2e2;
	color: #dc2626;
}

#demandesList .demande-accordion-note-form {
	margin-top: 10px;
}

#demandesList .demande-accordion-note-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

#demandesList .demande-accordion-note-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 5px;
}

#demandesList .demande-accordion-note-options {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	margin: 0 0 6px 0;
}

/* Les libelles du module sont en gras et en bloc : dans cette ligne d'options
   ils accompagnent leur case, sur la meme ligne. */
#demandesList .demande-accordion-note-options label {
	display: inline;
	margin-right: 12px;
	font-weight: normal;
}

#demandesList .demande-accordion-note-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}

/* Champ fichier natif : masque, il est declenche par le bouton voisin. Le
   display none l'ecarte aussi du parcours au clavier, ou le bouton le
   remplace. */
#demandesList .demande-accordion-file-input {
	display: none;
}

/* Nom du fichier choisi, avant envoi. */
#demandesList .demande-accordion-file-chip {
	max-width: 220px;
	overflow: hidden;
	padding: 2px 10px;
	border-radius: 50px;
	background: #dbeafe;
	color: #064d85;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#demandesList .demande-accordion-error {
	color: #a02c35;
	font-weight: 700;
}

#demandesList .demande-accordion-empty {
	font-style: italic;
}