@import url('/common/assets/components.css');

    :root {
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    :root[data-theme="dark"] {
        --shadow-sm: 0 10px 20px rgba(0, 0, 0, 0.22);
        --shadow-md: 0 14px 28px rgba(0, 0, 0, 0.28);
    }


    * {box-sizing: border-box;}
    html, body {margin:0; padding:0;}
    body {
        min-height:100%;
        width:100%;
        background:var(--color-bg);
        color:var(--color-text);
    }
	.interface-top {height:40px;}
	.interface-bottom {height:50px;}
	
	h1 {font-size:150%}
	h2 {font-size:125%}
	h3 {font-size:110%}
	
	
	button:not([class]) {
		color: var(--button-text);
		background: var(--button-bg);
		border-color: var(--button-border);
	}
	button:not([class]):hover {
		color: var(--button-text-hover);
		background: var(--button-bg-hover);
		border-color: var(--button-bg);
	}
	.imgbutton {width:30px;margin:10px;opacity:0.5; cursor:pointer}
	.imgbutton:hover {opacity:0.8}

    ::placeholder {
        color: color-mix(in srgb, var(--color-text, #000000) 68%, transparent);
        opacity:0.7;
    }
	.popover {pointer-events:none}
	.btn{color: var(--color-text); background:var(--light-bg-color)}
	.btn:hover{color: var(--color-text); background:var(--verylight-bg-color)}
	#popup_close button { background-color: var(--midlow-bg-color); border-color: var(--midsup-bg-color);;}
	#popup_close button:hover { background-color: var(--light-bg-color); }

	#popup {padding:20px;z-index:20;opacity:0;width:100%; max-width:600px; height:100%; position:fixed; background:#FFFFFF; top:0px; bottom:0px; margin-left: 100%;box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.3);}
	#popupbackground {position:fixed; z-index:2; top:0px; left:0px; bottom:0px;right:0px;display:none; background:rgba(0,0,0,0.3);opacity:0}
	#popup_close {position:absolute; top:0px; right:0px;}
	#popup select {width:100%}
	#popup input:not([type=checkbox]), #popup textarea, #popup select {width:100%; padding:10px; border-radius:5px; border:1px solid var(--greyColor);margin-bottom:3px;}
	#popup option {padding:5px;}
	#popup button {margin-top:6px;}
	#popup_close button {margin-top:0px; border-radius:0px 0px 0px 10px;}
	#popup_content {height:100%;}
	
	.liketext {border:0px !important;}
	.liketext:focus {outline: none; border:1px solid black;}
	 .divedit:empty::after {
	  content: attr(placeholder);
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  color: #AAAAAA;
	  z-index: 1; 
	} 
	.divedit { display:block;}

	  .interface-top:has(> input#id:valid) {padding-left: 30px; background-image:url(/img/diskette.png); background-size:20px 20px; background-position: 5px 5px; background-repeat:no-repeat}
	  .interface-top:has(> input#id:valid):has(> input#saved:valid) {background-image:url(/img/diskette_warning.png);}
	  input#id, input#saved {display:none}

	div.vertical {
	   
		position: relative;
		top: 50%;
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.list_item {
		background: #EEE;
		padding: 5px;
		border-radius: 5px;
		margin-bottom: 5px;	
	}

	form {position:relative}
	form.disabled {pointer-event:none}
	form.disabled:after {content: " ";
		 content: " ";
		  display: block;
		  background: rgba(255,255,255,0.5);
			background-position-x: 0%;
			background-position-y: 0%;
			background-repeat: repeat;
			background-image: none;
			background-size: auto;
		  background-image: url(img/loading.gif);
		  background-size: 72px;
		  background-position: center center;
		  background-repeat: no-repeat;
		  top: 0px;
		  left: 0px;
		  right: 0px;
		  position: absolute;
		  bottom: 0px;
	}
	
	@media screen {	
		#tools {background:var(--midlow-bg-color)}
		#menu {z-index:3;position:fixed; top:0px; right:20px; border-radius: 0px 0px 10px 10px; padding:10px;background-color:#FFFFFF;box-shadow: 5px 5px 10px rgba(0,0,0,0.5)}
		.interface-top {background:var(--midlow-bg-color)}
		.interface-bottom { height:50px; background:url(/img/systemeD.png) 10px center no-repeat var(--midlow-bg-color); background-size: auto 30px}
		.liketext { background-color:rgba(0,0,0,0)}
		.liketext:focus {background:var(--verylight-bg-color);   border-color:black;}

	}
	@media print { 
		.interface-bottom {display:none}
		#tools, #menu {display:none}
		.tooltip { display: none; }
		.noPrint {display:none}
		  input[type="date"], input[type="time"] {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			border: none;
			background: none;
			color: black; /* Pour s'assurer que le texte est visible */
		  }
	}