html, body, div, form, iframe {margin:0; padding: 0;}
body { 	font-family: Helvetica, sans-serif; font-size: 14px; color:#333333; }

* {
  box-sizing: border-box;
}

div#header { 
	background-color: #014D37; background-image:url('/css/cr_logo.png');
	background-size: contain; background-repeat:no-repeat; background-position: 10px ;
	color:white ; font-size:18px ;  width:100% ; z-index:100 ; position: sticky; top:0 ;
			padding:5px 5px 5px 80px; 
			min-height :40px; 
			line-height: 40px; vertical-align:top;
} 
div#header a { color: white;  text-decoration: none;}
div#header a#home { color: white; margin:0 0 0 2px ; padding:0 2px; border: 1px solid white; text-decoration: none;}
div#logout{position: absolute; top:5px; right:20px; background-color: #014D37; }
div#logout a {color: white ; text-decoration:none; }
div#header form {display: inline;}

a img { border: none; }
a { color: #014D37; text-decoration: underline; }
a:hover { color: #2040B0; text-decoration: none; }

i { font-style:normal; vertical-align: middle; }

.erreur  {
	background-color:#F6E0E8 ; color: #902038 ; 
	font-size:20px ; 
	border: 1px solid #014D37; padding:30px 20px;
	border-radius: 4px;
}
.message {
	background-color:#d4edda ; color: #014D37 ; 
	font-size:18px ; 
	border: 1px solid #014D37; padding:30px 20px;
	border-radius: 4px;
}
.note {
	padding: 15px; 
	background-color: #fafafa; 
	border-left: 3px solid #014D37; 
	border-radius: 4px;
	font-size: 14px; color: #666;
}

/* tableaux */
table {border-collapse: collapse;}
th, td {border: 1px solid #999; padding: 10px;}
th {background-color: #eee;}
tr.trA, tr.highlighted {background-color: #F4FFF4;}
tr.trB {background-color: white;}
tr:hover {background-color: #F0FFF0;}
td.tdCenter {text-align: center;}
td.comment {font-style: italic; color: #666; font-size: 11px;}

div.content { position:relative; background-color: white ; min-height: 500px; }
div.documentation { margin: 10px 20px; padding : 20px; background-color:#eee; border-radius:20px; font-size: 18px;}
div.documentation li { margin-bottom:20px;}

div.debug {padding : 20px; font-family: Arial, "MS Trebuchet", sans-serif;}
div.exception {background-color: #e0ffe0 ; color: #014D37 ; padding:10px ;  font-size:24px ; 
	position:absolute ; top:40px ; left:50px ; z-index:3}

.onlymobile {    display: none; }
.onlyprint { display: none;  }

div.r3_bloc_resultat { margin: -10px 0 30px 0; padding : 20px; background-color:#eee; border-radius:20px; font-size: 18px}
h2.title_r3 {margin-bottom: 0;}

div.r3_bloc_resultat h2, h2.title_r3 {font-size: 24px;}

hr.clear {clear:both; visibility: hidden; }

.right { float:right }

input , input[type="submit"], select, a.button, button {
    box-sizing:border-box ;
    background-color: #eee;
    transition: width 2s, background-color 1s;
    margin: 0; height: 40px ; vertical-align: bottom;
    font-size: 16px;
    padding: 0 10px ;
    border: #666 2px solid;
    border-radius: 10px ;
}

input:focus {
    outline: none;
    background-color: white;
    border: #014D37 2px solid;
}
input[type="submit"], input[type="button"], a.button , button{
    background-color: white;
    color: #014D37;
    border: #014D37 2px solid;
    height: 40px ; 
    cursor: pointer;
}
a.button { 
	text-decoration: none; padding: 10px; 
}
input[type="radio"] {
	height:14px;
	margin-left:20px;
}

div#header input[type="submit"],  div#header input[type="button"]{
     border: #666 1px solid; 	
}
input[type="submit"]:hover, input[type="button"]:hover, a.button:hover, button:hover {
    cursor: pointer;
    background-color: #014D37; 
    color: white;
    border: white 2px solid;
}
input[type="email"]{
    width:400px;
}

/* Pour coller un select à gauche d'un input*/
.select_left {
  border-right: none;
  border-radius: 8px 0 0 8px;
  appearance: none; 
  margin:0 -5px 0 0;
  font-size: 24px;
}

.input_right {
  border-left: none;
  border-radius: 0 8px 8px 0;
}

/*pour colorer les inputs avec une valeur*/
input.filled, select.filled {
  background-color: #e0ffe0; /* vert clair */
}

h1 {
	color: #014D37;
    border-bottom: 1px solid #014D37; margin-top:0;
}

div.cr2col{
	padding:50px 4%; margin: 0 ;
	float:left; width:50%;
	min-height:500px;
	background-color:white;
}
div.cr1col{
	padding:50px 4%; margin: 0 auto ;
	width:50%; min-width: 600px ;
	min-height:500px;
	background-color:white;
}
div.cr1col100{
	padding:50px 2% 50px 4%; margin: 0 auto ;
	width:100%; 
	min-height:500px;
	background-color:white;
}
div.grey{
	background-color:#DDDDDD;
}

div.crblocmenu {
	float:left; width: 280px ; padding : 0 20px ; margin: 20px;
	border: 3px solid #014D37; border-radius:20px; min-height:350px ;
	background-color:white;
}
div.crblocmenu a {
	text-decoration: none;
}
div.crblocmenu_expert {
	background-color: #e0ffe0 ;
}

div.crblocmenu_endev {
	background-color: #eee;
}


div.crblocmenu:hover, div.crblocmenu_expert:hover {
	background-color:#eee;
	cursor: pointer;
}

div.crblocmenu_retour {
	position:absolute; right:0; width: 120px ; padding : 15px ; margin: 10px;
	border: 3px solid #014D37; border-radius:20px; min-height:100px ;
	background-color:white;
	text-align:center;
}
div.crblocmenu_retour:hover {
	background-color:#eee;
	cursor: pointer;
}

div.crblocmenu h2 {color: #014D37 ; font-size:28px;}
div.crblocmenu_retour h2 {color: #014D37 ; font-size:18px; margin-top: 0;}

ul.menu_liste li {margin-bottom : 20px ; font-size : 18px ;}

/* locate */
.tabres {float:left; width:45%;}
table.tabres td {border-style: none; padding: 20px ; font-size:16px;}
table.tabres tr.a {background-color:#eee; }
table.tabres tr.b {background-color:#ccc;}
table.tabres tr:hover {background-color:#aaa; cursor: pointer;}

span.tabres_nom {font-weight: bold;}
span.tabres_ddn {font-style: italic;}
span.tabres_adresse {font-style: italic;}
span.tabres_date {font-style: italic; color:#555;}

div.ficheres {
	float: left ; max-width: 45%; margin-left : 5%;
	min-width:450px; min-height: 450px;
	background-color: #aaa ; border-radius : 20px; padding : 30px 30px 10px 30px;
	font-size:20px;
}

/*** Recherche CR - tableau de resultat ***/
table.tabHunt a { font-weight: bold; font-size: 15px; text-decoration: none;}
table.tabHunt a.phone_link { font-size : 13px ;}

table.tabHunt a:visited { color: #CCA876; }

table.tabHunt { font-size: 12px ; color: black; width: 100%}

table.tabHunt th {background-color: white; padding: 20px 5px 5px 5px ; border:none ; vertical-align: bottom;}
table.tabHunt td {padding: 15px 5px 5px 5px ; border-left:none; border-right: none; border-bottom: none ; border-color: #014D37;}	
table.tabHunt td {vertical-align: top; }
table.tabHunt td.name { padding-left: 2px; font-size: 15px; color:#014D37 }
table.tabHunt td.birthDate { background-color: #F0FFF0 ; text-align: center; font-size: 13px;}
table.tabHunt td.voir {text-align: center; font-size: 13px;}
table.tabHunt td.hunttdcity { font-size : 12px}
table.tabHunt td.collection { text-align: center; color:#014D37 }
table.tabHunt td i { font-size: 24px; vertical-align: middle; }
table.tabHunt td.status { text-align: center; }
table.tabHunt td.cote { font-size: 12px; color: #555; }
table.tabHunt tr.collapse td {border-top:1px dotted #bbb ; }
table.tabHunt tr:hover { background-color: #bbb }
table.tabHunt tr:hover td.birthDate { background-color: #ccc }
table.tabHunt .collectionName { color: #555; }
table.tabHunt .comment { color: #666; font-size: 11px; }

/* Alertes métier - Tooltip CSS personnalisé */
.business-alert {
	position: relative;
	display: inline-block;
	cursor: pointer;
	font-size: 16px ;
	margin-right: 2px;
}
table.tabHunt td .business-alert i { font-size: 14px;  }

.business-alert-warning {
	color: #ff6600;
}

.business-alert-info {
	color: #0066cc;
}

/* Bulle du tooltip - cachée par défaut */
.business-alert-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background-color: rgba(0, 0, 0, 0.9);
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Flèche du tooltip */
.business-alert-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.9);
}

/* Affichage au survol */
.business-alert:hover .business-alert-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Couleurs spécifiques par niveau */
.business-alert-warning:hover .business-alert-tooltip {
	background-color: #ff6600;
}

.business-alert-warning:hover .business-alert-tooltip::after {
	border-top-color: #ff6600;
}

.business-alert-info:hover .business-alert-tooltip {
	background-color: #0066cc;
}

.business-alert-info:hover .business-alert-tooltip::after {
	border-top-color: #0066cc;
}


div.parents {border-left: 1px solid #666; padding-left: 20px; padding-top: 10px;
	font-size: 12px; color: #666;
}

/* Volet latéral pour afficher les infos de collection */
.collection-panel {
    position: fixed;
    right: -450px;
    top: 0;
    width: 450px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
    border-left: 1px solid #ddd;
    font-family: Arial, sans-serif;
}

.collection-panel.open {
    right: 0;
}

.collection-panel-header {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    border-bottom: 2px solid #0066cc;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collection-panel-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.collection-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-panel-close:hover {
    color: #000;
}

.collection-panel-content {
    padding: 20px;
}

.collection-panel-section {
    margin-bottom: 25px;
}

.collection-panel-section h3 {
    font-size: 14px;
    font-weight: bold;
    color: #0066cc;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

.collection-panel-field {
    display: flex;
    margin-bottom: 8px;
    font-size: 13px;
}

.collection-panel-label {
    font-weight: bold;
    min-width: 100px;
    color: #555;
    margin-right: 10px;
}

.collection-panel-value {
    color: #333;
    flex: 1;
    word-break: break-word;
}

.collection-panel-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.collection-panel-loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.collection-panel-error {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 15px;
    border-radius: 4px;
    margin: 20px;
    font-size: 13px;
}

.collection-name-link {
    font-size: 12px !important /* Forcer la taille plus petite */;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    transition: color 0.2s;
}

.collection-name-link:hover {
    text-decoration: underline;
}

/* Overlay semi-transparent derrière le volet */
.collection-panel-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.collection-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}


/*** Form Event ***/
form.form_event {border-bottom: 2px solid #014D37;}
form.form_event table { margin: 0 auto;}
form.form_event td, form.form_event th {border : none; vertical-align: middle; }
form.form_event td input, form.form_event td i {vertical-align: middle; }
form.form_event tr { display:table-row;}

td.event_detail {width: 50%; padding:0 !important ; }
table.t_event_detail {width: 100%; margin:0 ;  }
table.t_event_detail td {border:none !important;  }
.t_event_detail_td1 {width: 20% ; }
.t_event_detail_td2 {width: 40% ; text-align: left;}
.t_event_detail_td3 {width: 40% ; }
tr.t_event_detail_tr2 td {padding-top:0}
td.action, td.link {text-align: center;}
td.action:hover {cursor: copy; } 
td.link:hover {background-color:#666 ; }
td.link:hover a { color : white}




/* inventory */
div.collection_description {font-style: italic; color: #666; padding-left :20px; border-left: 1px dotted #666 ; font-size: 0.9em;}

table.captionInventory {position: sticky; top: 0; background: white; height: 40px ; z-index: 200; width:100%}
table.tabInventory th { position: sticky; top: 40px ; background: white; z-index: 200;}
table.tabInventory td { text-align: center;}
  td.city {
    font-weight: bold;
	text-align: left;
	position: sticky; left: 0; background: white; z-index: 1;
  }
  td.Indexed {
    color: #0C600B;
    background-color: #E4F6E3;
  }
  td.ToIndex {
    color: #773804;
    background-color: #F3E8C4;
  }
  td.NotIndexed {
    color: #2F3952;
    background-color: #E5E7EC;
  }
  td.Missing {
    color: #902038;
    background-color: #F6E0E8;
  }
  td.ToDigitize {
    color: #902038;
    background-color: #F6E0E8;
  }
  td.important {
	font-weight: bold;
	background-color: #F6E0E8;
  }
  tr.zoom_hover:hover {
	background-color: #bbb ;
  }

/* resource */
table.resource_holder tr:hover {
	color: #0C600B;
	background-color: #E4F6E3; 
}

table.resource_holder tr.tr_1 td, table.resource_holder tr.tr_1 th  {
	border-top-width: 3px;
}
table.resource_holder tr.AD {
	    background-color: #F6E0E8;
}
table.resource_holder tr.AM {
    background-color: #E5E7EC;
}
table.resource_holder tr.STE {
    background-color: #E4F6E3;
}

/* pwd_consult */
form#pwd_consult input.secret {color: whitesmoke;}

/* loader */
.loader {
  border: 4px solid #f3f3f3 !important;
  border-top: 4px solid #014D37 !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 10s linear infinite;
  margin: 10px auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 650px) { 

    .nomobile {
        display: none;
    }
    .onlymobile {
        display: block;
    }

	div.crblocmenu {
		width: 150px ; padding : 20px ; margin: 15px;
		border: 3px solid #014D37; border-radius:20px; 
		min-height:150px ;	
	}
	div.crblocmenu h2 { font-size:20px;}

	div.crblocmenu h3 , div.crblocmenu p {
        display: none;
	}

	div#header { 
		background-color: #014D37; background-image:none;
		/*background-size:contain; background-repeat:no-repeat; background-position: 10px ;*/
		padding: 5px;
		height : auto ; 
	} 
	
	input , input[type="submit"], select {
		display: block; margin:5px auto
	}

	.input_right  { display: inline !important;  margin:0 ;}
	.select_left { display: inline !important;  margin:0 -5px 0 0 ;}

	div.cr2col, div.cr1col, div.cr1col100, .tabres, .ficheres{
		float:none; width:100%; margin: 0 ; 
	}

	table.tabHunt {width: auto;}
	table.tabHunt th.name, table.tabHunt td.name { min-width: 200px ; background-color: white; position: sticky; left: 0; z-index: 2;}


}

@media print {
	.onlyprint { display: block;  }

	.noprint {display: none }
	div#header form {display: none }

	div.cr1col100{
		padding:0 ; margin: 0 auto ;
		width:100%; 
	}

	/* Mode battue (hunt)- tableau de resultat*/
	table.tabHunt { font-size: 12px !important ; color: black !important; width: 100%}
	table.tabHunt tr { /* pas de coupure de page à l'intérieur de ces éléments */
    	page-break-inside: avoid;
    	break-inside: avoid;
	}
	table.tabHunt td {border-color: #ccc; padding: 5px; font-size: 12px !important ; color: black !important;}	
	table.tabHunt td.birthDate, table.tabHunt th.birthDate  { background-color: whitesmoke;}
	table.tabHunt td.hunttdcity { font-size : 11px}
	table.tabHunt tr.collapse td {border: none !important ; font-style: italic; }
}