body, h1, h2, h3, h4, h5, h6  {
	font-family: Verdana, sans-serif;
	margin: 0;
	padding: 0;
	color: #31408c;
	leftmargin:0;
	topmargin:0;
	alink:#ffffff;
	vlink:#ffffff;
	bgcolor:#ffffff;
	link:#ffffff;
	marginheight:0;
	marginwidth:0;
	text:#31408c; 
	
}


body onload="size();" leftmargin="0" topmargin="0" alink="#ffffff" bgcolor="#ffffff" link="#ffffff" marginheight="0" marginwidth="0" text="#000000" vlink="#ffffff"

a:link, a:visited {
  text-decoration: none;

}

a {
	text-decoration: none;
	color: #31408c;
}

a.tabSelected {
	text-decoration: none;
	color: white;
}

a.tabSelected:hover {
	text-decoration: none;
	color: #31408c;
}

a.nonSelected {
	text-decoration: none;
	color: #31408c;
}


a.nonSelected:hover {
	text-decoration: none;
	color: white;
}


li {
	list-style: none;
}

li.txt1 {
	list-style: disc;
}


table.h1 {
	height:auto; 
	border:1px solid grey;
    width:1100px; 
    margin-left:auto; 
    margin-right:auto;
}
table.h2 {
    width:1100px; 
	border:1px;
    margin-left:auto; 
    margin-right:auto;
}

table.h3{
	height:auto;
	border: 0px solid grey;
	width:1108px;
	margin-left:auto; 
    margin-right:auto;
}
table.f1 {
    width:1100px; 
    margin-left:auto; 
    margin-right:auto;
}


  
table.tbl1 {
    width:1100px; 
    margin-left:auto; 
    margin-right:auto;
}


table.tbl2{
	height:auto;
	border: 1px solid grey;
	width:1108px;
	margin-left:auto; 
    margin-right:auto;
}	
td.tbl1 {
  text-align: center;
}


table.tbl0{
	margin-left:auto; 
    margin-right:auto;
	border:2px;
	height:437px;
	width:auto;
}

table.tbl1{
	border:2px;
	height:auto;
	width:100%;
	
}

table.tbl2{
	margin-left:auto; 
    margin-right:auto;
	height:auto;
	width:1100px;
	#border: 1px solid grey;
	cellpadding:0;
}



table.tblX{
	margin-left:auto; 
    margin-right:auto;
	height:auto;
	width:100%;
    border: 0px solid grey;
}

table.tab-ind1{
	
	margin-left: auto;
    margin-right: auto;
	border:0;
	cellpadding:8;
	cellspacing:0;
	height:auto;
	width:1100;
}

td.tab-ind1 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
 
}

td.tab-indx1 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px yellow;
}


td.tab-indx2 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px green;
}

td.tab-indx3 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px red;
}

td.tab-indx4 {
  text-align: left;
  vertical-align: middle; 
  border-top: solid 1px #252c4f;
  border-left: solid 2px blue;
}






li.tab-ind1 {
color:#252c4f; 
font-size: 23px; 
font-family: Verdana, sans-serif;
}



td.tbl2td2{
	width:25%;
	padding-left: 25px;
}


td.tbl2td1{
	width:3%;
	vertical-align: top;
	#border: 1px solid grey;
}




td.tbl3td1{
	width:3%;
	vertical-align: top;
	border: 0px solid grey;
	text-align: center;
}


tr.tbl3tr1{
	#border-bottom-style: solid;
	border-left-style: solid;
}



.name {
    color: #f5f5f5;
    font-size: 18px;
    background-color: #252c4f;
    text-align: center;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
.button {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
}

.button:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
	}
.button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.button1 {
    background-color: white; 
    color: black; 
    cursor: pointer;
	font: bold 14px Arial;
	width: 50%;
	border-radius: 8px;
}

.button1:hover {
    background-color: #2f8e17;
    color: white;
	cursor: pointer;
	font: bold 14px Arial;
	width: 50%;
	border-radius: 8px;
	}
.button1:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button2 {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
}

.button2:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
	}
.button2:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px); 
}

##########################
ul {
	display: inline-block;
	width: 1400px;
	margin: 48px auto;
	border-bottom: 1px solid #DAE0E7;
	background: #F9F9F9;
	list-style-type: none;
	padding:12px 12px 0;
}



.tab {
	float: left;
	height: 44px;
	margin: 0 8px -1px 0;
	border: 1px solid #DAE0E7;
	background: #F9F9F9;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.tab, .tab a {
	transition: all .25s;
}

.tab a {
	display: inline-block;
}

.tab a:first-child {
	padding: 8px 8px 8px 8px;
 white-space: nowrap;
 
}

.tab:hover {
	background: grey;
	color: blue
}

.tabSelected {
	height: 45px;
	border-bottom: none;
	background: grey;
	text-decoration: none;
	color: red;
}





.tab-app {
	float: left;
	height: 44px;
	margin: 0 8px -1px 0;
	border: 1px solid #DAE0E7;
	background: #e0f0f7;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.tab-app, .tab-app a {
	transition: all .25s;
}

.tab-app a {
	display: inline-block;
}

.tab-app a:first-child {
	padding: 8px 8px 8px 8px;
 white-space: nowrap;
 
}

.tab-app:hover {
	background: grey;
	color: blue
}



.tabSelected-app {
	height: 45px;
	border-bottom: none;
	background: grey;
	text-decoration: none;
	border-radius: 8px 8px 0 0;
	color: white;
}




.but1:hover {
	background: grey;
	color: white;
	cursor: pointer;
}

.but1 {
	height: 45px;
	border-bottom: none;
	border: 1px solid #DAE0E7;
	background: #F9F9F9;
	border-radius: 8px 8px 0 0;
	text-decoration: none;
	color: 31408c;
}

.but2 {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
}

.but2:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 50%;
	border-radius: 8px;
	}
	
	
.but2:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px); 
}


.but3 {
    background-color: #252c4f; 
    color: #f5f5f5 ; 
    cursor: pointer;
	font: bold 14px Verdana;
	width: 25%;
	border-radius: 8px;
}

.but3:hover {
    background-color: rgba(0,106,140,0.5);;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 25%;
	border-radius: 8px;
	}
	
	
.but3:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px); 
}




.dim {color: #CCC;}
.col1 {text-align: center; font-size: 12px;}
.col2 {text-align: left; font-size: 12px;}
.col3 {text-align: left; font-size: 12px;}
.col4 {text-align: left; font-size: 12px;}
.col5 {text-align: left; font-size: 12px;}
.col6 {text-align: center; font-size: 12px;}
.col7 {text-align: center; font-size: 12px;}
.col8 {text-align: center; font-size: 12px;}
.col9 {text-align: center; font-size: 12px;}
.col10 {text-align: center; font-size: 12px;}
.col11 {text-align: center; font-size: 12px;}
.col12 {text-align: center; font-size: 12px;}
.col13 {text-align: center; font-size: 12px;}
.col14 {text-align: center; font-size: 12px;}
.col15 {text-align: center; font-size: 12px;}
.col16 {text-align: center; font-size: 12px;}
.col17 {text-align: center; font-size: 12px;}
.col18 {text-align: center; font-size: 12px;}
h1 {font-size: 18px; padding: 2px; margin: 0 0 10px 0;}
li {font-size: 16px; padding: 2px; margin: 0 0 2px 0; list-style-type: none;}
a {text-decoration: none; color: blue;}
a:hover, a:active {color: #e0f0f7;}
a.selected {font-weight: bold; color: #e0f0f7;}
dl {margin: 0 0 0 70px; float: left;}
dt, dd {float: left; margin: 0 5px 3px 0; padding: 1px 3px; font-size: 11px; font-weight: normal;}
dt {clear: both; text-transform: uppercase; margin-left: -73px;}
dd {background-color: #FFF;}
dd a.selected {font-weight: normal;}
dd a sup {line-height: 0; margin-left: 1px;}
table {border-collapse: unset; clear: both; empty-cells: show;}
caption {border: 1px solid #DDD; border-bottom-style: none; padding: 2px 4px; background-color: #EEE; font-size: 14px;}
th, td {border: 0px solid #DDD; padding: 2px 4px; vertical-align: top;}
th {background-color: #EEE;}
tr.ok  td {background-color: #CFC;}
tr.off td {background-color: #FCC;}
tr.quota_off td {background-color: #FCC;}
tr.re td {background-color: #FCC;}
tr.used td {background-color: #FFC;}

.footerlabel{
	margin-left:5px;
	margin-right:5px;
	font-weight:normal;
	font-size:10px;
	color:#000000;
	font-family:verdana;
}
.label {
  min-width: 160px;
}
.label2 {
  min-width: 250px;
}


.label3 {
  min-width: 200px;
}
 .highlight {
    color: red;
  }
  
 
 .highlight1 {
    color: green;
}
  
 .container {
    display: flex;
    flex-wrap: wrap;
}

.column {
    width: calc(100% / 3);
    padding: 5px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.first-column {
    border-left: none;
}

.column:last-child {
    border-right: none;
}

@media screen and (max-width: 768px) {
    .column {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 576px) {
    .column {
        width: calc(100% / 5);
    }
}
.row-even {
    background-color: #ffffff;
}

.row-odd {
    background-color: #EEE;
}

.btn-edit {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 130px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-edit:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 130px;
	border-radius: 4px;
	}

.btn-edit:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-new {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-new:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	}

.btn-new:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-ren {
 background-color: #ff0018; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 90px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-ren:hover {
    background-color: #d36973;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 90px;
	border-radius: 4px;
	}

.btn-ren:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}












.btn-editpg {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-editpg:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	}

.btn-editpg:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-editper {
 background-color: #4b8f29; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-editper:hover {
    background-color: #69d134;
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 150px;
	border-radius: 4px;
	}

.btn-editper:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-deleteper {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 11px 2px 1px;
    display: inline-block;
}

.btn-deleteper:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 165px;
	border-radius: 4px;
	}


.btn-activ {
    background-color: #007BFF;
    color: #f5f5f5;
		text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 130px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-activ:hover {
    background-color: #3399FF;  
    color: black;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 130px;
    border-radius: 4px;
}


.btn-activ:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}



.btn-deletepg {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 11px 2px 1px;
    display: inline-block;
}

.btn-deletepg:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 110px;
	border-radius: 4px;
	}

.btn-deletep {
 background-color: #ff0018;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 130px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 1px 2px 1px;
   	display: inline-block;
}

.btn-deletep:hover {
    background-color: #ed6b78;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 130px;
	border-radius: 4px;
	}

.btn-deletep:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}


.btn-deleted:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);  
}

.btn-deletel {
 background-color: #d12e6b;
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 112px;
	border-radius: 4px;
	border-width: 1px;
	padding: 1px 11px 2px 1px;
    display: inline-block;
}

.btn-deletel:hover {
    background-color: #e0729b;  
    color: black;
	cursor: pointer;
	font: bold 14px Verdana;
	width: 112px;
	border-radius: 4px;
	}

.btn-submit {
	background-color: #337218; 
    color: #f5f5f5;
	text-align: center;	
    cursor: pointer;
	font: bold 14px Verdana;
	width: 70px;
	border-radius: 4px;
	border-width: 0px;
	padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-submit:hover {
    background-color: #96d37c;
    color: black;
	cursor: poi
}

.btn-raport {
    background-color: orange;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 70px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-raport:hover {
    background-color: #f9cf81;
    color: black;
    cursor: pointer;
}


.btn-info {
    background-color: #3258be;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 165px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-info:hover {
    background-color: #7c97dc;
    color: black;
    cursor: pointer;
}

.btn-upload {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 90px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-upload:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
}


.btn-addpg {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 90px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-addpg:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
}

.btn-download {
    background-color: #9c3d82;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 190px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-download:hover {
    background-color: #cd81b8;
    color: black;
    cursor: pointer;
}


.btn-uploadf {
    background-color: #fcbf0a;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 190px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-uploadf:hover {
    background-color: #fee394;
    color: black;
    cursor: pointer;
}

.btn-demo {
    background-color: #59B9FF;
    color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    font: bold 14px Verdana;
    width: 190px;
    border-radius: 4px;
    border-width: 0px;
    padding: 1px 3px 2px 1px;
    display: inline-block;
}

.btn-demo:hover {
    background-color: #AADBFF;
    color: black;
    cursor: pointer;
}



.btn-none {
display: none;
}

.file-name {
            margin-top: 10px;
            font-size: 14px;
        }

.delete-message {
    background-color: #f44336; /* Culoare de fundal roșie */
    color: white; /* Text alb */
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}



.info-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.info-icon::after {
    content: attr(data-tooltip);
    visibility: hidden;
    width: 200px; /* Lățimea tooltip-ului */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 5%; /* Poziția tooltip-ului deasupra icon-ului */
    left: 105%; /* Poziția tooltip-ului la dreapta icon-ului */
    margin-left: 10px; /* Spațiu între icon și tooltip */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    white-space: pre-wrap; /* Permite linii multiple */
}

.info-icon::before {
    content: '';
    position: absolute;
    top: 42%; /* Poziționează săgeata vertical pe tooltip */
    left: 29px; /* Poziționează săgeata la stânga tooltip-ului */
    margin-left: -8px; /* Ajustează poziția săgeții față de tooltip */
    border-width: 8px;
    border-style: solid;
    border-color: transparent #555 transparent transparent; /* Săgeata pe stânga tooltip-ului */
    transform: translateY(-50%); /* Centrează săgeata vertical pe tooltip */
    visibility: hidden; /* Ascunde săgeata implicit */
    opacity: 0; /* Ascunde săgeata implicit */
    transition: opacity 0.3s, visibility 0.3s;
}

.info-icon:hover::after {
    visibility: visible;
    opacity: 1;
}

.info-icon:hover::before {
    visibility: visible;
    opacity: 1;
}

.btn-rebuild { 
display:inline-block; 
padding:8px 12px; 
border:1px solid #ddd; 
border-radius:8px; 
text-decoration:none; 
}
.btn-rebuild:hover { 
background:#f7f7f7; 
}


/* Antet tabel Campanii - albastru */
#codesTable thead tr.tr_color th,
table.tbl1 thead tr.tr_color th {
  background-color: #31408c !important;
  color: #fff !important;
}
/* Antet albastru peste DataTables */
#codesTable.dataTable thead th,
#codesTable thead tr.tr_color th {
  background-color: #31408c !important;
  color: #fff !important;
}


.grid {
	display:grid; grid-template-columns:1fr 1fr; gap:24px; 
	align-items:start; 
	}
	
.card { 
	background:#fff; 
	border:1px solid #eaeaea; 
	border-radius:12px; 
	padding:24px 28px; 
	width: 380px; 
	box-shadow: 0 6px 18px rgba(0,0,0,.06); 
	}
	
.ok { 
	color:#0a7a0a; 
	}
	
.err{ 
	color:#b00020; 
	}
	
label { 
	display:block; 
	margin-bottom:10px; 
	}
	
input[type=text],input[type=password]{
	width:90%; 
	padding:9px 10px; 
	border:1px solid #ddd; 
	border-radius:8px; 
	}
	
.meta { 
	font-size:12px; 
	color:#777; 
	margin-top:10px; 
	}
/* === Login buttons (anchor + button) === */
.btn-login,
a.btn-login,
button.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #31408c;
  background: #31408c;

  font: 600 14px Verdana, sans-serif;
  line-height: 1.2;
  text-decoration: none;

  color: #fff !important;   /* învinge a{color:...} din stylesheet */
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .02s ease;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

a.btn-login:link,
a.btn-login:visited {
  color: #fff !important;   /* sigur pentru <a> în toate stările */
  text-decoration: none;
}

.btn-login:hover {
  background: #3c4db0;
  border-color: #3c4db0;
  color: #fff !important;
}

.btn-login:active {
  transform: translateY(1px);
}

.btn-login:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 64, 140, .25);
}

.btn-login[disabled] {
  opacity: .6;
  cursor: not-allowed;
}


@media (max-width:900px){
	.grid{ 
	grid-template-columns:1fr; 
	} 
	.card{ 
	width: min(92vw, 420px);} }


/* === Shortlinks Modern UI (non-breaking) === */
.sl-wrap{max-width:1100px;margin:0 auto;}
.sl-row{
	display:inline;
	align-items:start
	}
@media(max-width:1000px){.sl-row{grid-template-columns:1fr}}
.sl-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);}
.sl-card .sl-hd{padding:14px 18px;border-bottom:1px solid #f0f0f0;font-size:16px;font-weight:700;color:#31408c}
.sl-card .sl-bd{padding:18px}

.sl-field{margin-bottom:14px}
.sl-label{display:block;margin-bottom:6px;font-weight:600;color:#31408c}
.sl-input{width:90%;padding:10px 12px;border:1px solid #d6d8df;border-radius:10px;background:#fff;font-size:14px}
.sl-input:focus{outline:none;border-color:#31408c;box-shadow:0 0 0 3px rgba(49,64,140,.15)}
.sl-actions{display:flex;gap:10px;align-items:center;margin-top:8px}

.sl-alert{padding:10px 12px;border-radius:10px;margin:0 0 10px 0;font-size:14px}
.sl-alert.ok{background:#e8f6ee;color:#0b6b2e;border:1px solid #bfe8ce}
.sl-alert.warn{background:#fff5e5;color:#8a5800;border:1px solid #ffd08a}
.sl-alert.err{background:#ffecec;color:#8a1f11;border:1px solid #ffc1b8}

.sl-kv{display:grid;grid-template-columns:180px 1fr;gap:6px 12px;font-size:14px}
.sl-kv code{background:#f5f5f7;border:1px solid #e5e7eb;border-radius:6px;padding:2px 6px}

.sl-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sl-divider{height:1px;background:#f0f0f0;margin:12px 0}
.sl-muted{color:#6b7280;font-size:12px}

.sl-copy{border:1px solid #d6d8df;border-radius:8px;padding:8px 10px;background:#fafafa;cursor:pointer}
.sl-copy:hover{background:#f0f0f0}

.text-right { text-align: right; }


.orange-dark {
    color: darkorange;
    font-weight: 500; /* opțional, pentru accent */
	font-weight: bold;
  }

.blue-dark {
    color: blue;
    font-weight: 500; /* opțional, pentru accent */
	font-weight: bold;
  }

/* Forțează cele 2 coloane să fie egale în tabelul intern */
table.tbl3 { 
  width: 100%;
  table-layout: fixed;           /* împarte egal coloanele, nu se mai lărgește după conținut */
}
table.tbl3 tr.equal-cols > td.half {
  width: 50%;
  vertical-align: top;
}

/* Ca fieldset/card să nu forțeze lățimea și să respecte 50% */
table.tbl3 fieldset, 
table.tbl3 .sl-card {
  width: 100%;
  box-sizing: border-box;
}

/* (opțional) dacă ai texte/URL-uri foarte lungi în rezultat */
table.tbl3 .sl-bd {
  overflow-wrap: anywhere;       /* rupe cuvintele/URL-urile foarte lungi */
}


/* spinner mic pentru status rebuild */
    .spinner{
        display:inline-block; width:14px; height:14px;
        border:2px solid #ccc; border-top-color:#31408c;
        border-radius:50%; margin-right:6px;
        animation:spin 0.8s linear infinite;
        vertical-align: -2px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

/* Container upload */
.file-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Ascundere accesibilă a input-ului */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Buton personalizat */
.btn-file {
  background-color: #b34700;
  color: #fff;
  font: bold 14px Verdana, sans-serif;
  width: 165px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;           /* pointer funcționează acum, e pe buton real */
  transition: background .2s, transform .02s;
  display: inline-block;
}

.btn-file:hover {
  background-color: #cc5500;
  color: black;
}

.btn-file:active {
  transform: translateY(1px); /* „mișcarea” la apăsare */
}

/* Numele fișierului */
.file-name {
  margin-left: 2px;
  font-size: 14px;
  vertical-align: middle;
}


/* === Admin Users table – coloană acțiuni îngustă și curată === */
#usersTable th.col-actions,
#usersTable td.col-actions {
  width: 1% !important;     /* cât mai îngustă posibil */
  white-space: normal;       /* permite împachetarea textului */
}


/* anulăm lățimile fixe din stylesheet pentru butoanele din această coloană */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
}

/* (opțional) ține username și email pe un singur rând */
#usersTable td:nth-child(1),
#usersTable td:nth-child(3) {
  white-space: nowrap;
}



 /* lățimi controlate manual */
    #usersTable { table-layout: auto; }

    /* coloană îngustă, cât conținutul */
    #usersTable th.col-actions,
    #usersTable td.col-actions {
      width: 1%;
      white-space: nowrap;     /* nu rupe textul în interiorul butoanelor */
      vertical-align: middle;
    }

    /* stivuire verticală a butoanelor, cu spațiu între ele */
    #usersTable td.col-actions .action-wrap {
      display: inline-flex;
      flex-direction: column;  /* <<— vertical */
      align-items: normal;
      gap: 6px;
    }

    /* fiecare link rămâne compact, pe un singur rând */
    #usersTable td.col-actions a {
      display: inline-block;
      white-space: nowrap;
      line-height: 1.2;
      padding: 2px 6px;        /* micșorează dacă vrei coloană și mai îngustă */
    }
	
/* ==== Admin Users: separatoare și coloană Acțiuni corectă ==== */
#usersTable { 
  border-collapse: collapse;   /* elimină spațiul dintre celule */
  border-spacing: 0;
  table-layout: auto;
}

/* linii verticale & orizontale în tot tabelul */
#usersTable th, 
#usersTable td {
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}

/* ultima coloană fără border dreapta */
#usersTable th:last-child, 
#usersTable td:last-child {
  border-right: 0;
}

/* antet albastru (păstrăm stilul vostru) + linie sub antet */
#usersTable thead tr.tr_color th {
  background-color: #31408c !important;
  color: #fff !important;
  border-bottom: 1px solid #203078; /* linie sub antet */
}

/* coloană Acțiuni cât conținutul + o linie stânga clară */
#usersTable th.col-actions,
#usersTable td.col-actions {
  width: 1%;               /* îngustă, după conținut */
  white-space: nowrap;     /* butoanele nu rup textul intern */
  vertical-align: top;
  border-left: 1px solid #e5e7eb;   /* << separator vizibil */
}

/* stivuim butoanele pe verticală, fără a dilata celula */
#usersTable td.col-actions .action-wrap{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

/* butoane compacte în această coloană (anulăm lățimile fixe globale) */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
  padding: 2px 8px;
  line-height: 1.2;
}



/* ===== Admin Users — separator clar pentru coloana "Acțiuni" ===== */

/* lăsăm DataTables să calculeze lățimile, dar fără spațiere între celule */
#usersTable { border-collapse: separate; border-spacing: 0; }

/* linii orizontale ca în restul tabelului */
#usersTable th,
#usersTable td { border-bottom: 1px solid #e5e7eb; }

/* pregătim coloana de acțiuni pentru separator intern */
#usersTable th.col-actions,
#usersTable td.col-actions {
  position: relative;     /* ca să putem ancora pseudo-elementul */
  padding-left: 10px;     /* lăsăm loc pentru linie */
  width: 1%;              /* cât conținutul */
  white-space: nowrap;    /* nu rupe labelurile butoanelor */
  vertical-align: top;
}

/* linia verticală din interiorul coloanei de acțiuni */
#usersTable th.col-actions::before,
#usersTable td.col-actions::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: #e5e7eb;
  pointer-events: none;
}

/* butoanele rămân stivuite pe verticală, fără a lărgi coloana */
#usersTable td.col-actions .action-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* anulăm lățimile fixe doar în col. Acțiuni */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2;
  padding: 2px 8px;
}
	


/* ==== Admin Users – coloană Acțiuni corectă + separator vizibil ==== */
#usersTable { border-collapse: separate; border-spacing: 0; table-layout: auto; }

/* linii orizontale */
#usersTable th,
#usersTable td { border-bottom: 1px solid #e5e7eb; }

/* desenăm separatorul stânga pentru coloana Acțiuni */
#usersTable th.col-actions,
#usersTable td.col-actions {
  position: relative;
  padding-left: 10px;      /* spațiu pentru linie */
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
}
#usersTable th.col-actions::before,
#usersTable td.col-actions::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: #e5e7eb;
  pointer-events: none;
}

/* butoanele stau pe verticală ÎNĂUNTRUL celulei, nu pe <td> */
#usersTable td.col-actions .action-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* butoane compacte în această coloană */
#usersTable td.col-actions .btn-activ,
#usersTable td.col-actions .btn-edit,
#usersTable td.col-actions .btn-deletep {
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2;
  padding: 2px 8px;
}

/* Lățimi coloane Users */
#usersTable col.col-username { width: 13%; }
#usersTable col.col-name     { width: 22%; }
#usersTable col.col-email    { width: 30%; }
#usersTable col.col-role     { width: 8%;  }
#usersTable col.col-active   { width: 8%;  }
#usersTable col.col-actions  { width: 16%; } /* acțiuni – cât conținutul */


/* Stiluri pentru dispozitive mobile (ecrane mai mici de 768px) */
@media only screen and (max-width: 800px) {
  table.h2 {
    width: 90%;
    border: 1px solid black;
    margin-left: 0;
    margin-right: 0;
  }
}
.step-number-sup-info {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: orange;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}	
.step-content-sup-info {
    background: #fff;
    border-radius: 10px;
    padding: 1px 18px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    flex: 1;
    color: red;
}
.step-row-sup {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-ok{
  color: #0a7d2c;
  font-weight: 700;
}

.status-fail{
  color: #c62828;
  font-weight: 700;
}


/* dacă vrei și controalele DataTables mai mici (search, paginate etc.) */
.dataTables_wrapper {
  font-size: 12px;
}
/* header: nu rupe cuvintele (Keyword / Status etc.) */
/* micșorează fontul din celulele tabelului */
#bulkTable thead th{
  white-space: normal !important;
  word-break: keep-all !important;   /* nu rupe în mijlocul cuvântului */
  overflow-wrap: normal !important;
   font-size: 12px;
  font-weight: 600;          /* opțional */
  padding: 6px 8px;          /* opțional: mai compact */
  
}

/* dacă folosești scrollX / sau vrei scroll când nu încape */
.dataTables_wrapper{
  overflow-x: auto;
}

/* lasă loc pentru săgețile de sortare */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
  padding-right: 22px !important; /* ajustează 18-28px după cum arată */
}
/* === FORȚEAZĂ iconițele de sortare (vizibile pe antet albastru) === */

/* nu mai folosi background-image-ul din DataTables */
#bulkTable.dataTable thead th.sorting,
#bulkTable.dataTable thead th.sorting_asc,
#bulkTable.dataTable thead th.sorting_desc {
  background-image: none !important;
  position: relative;
  padding-right: 26px !important;  /* loc pentru săgeți */
  cursor: pointer;
}

/* starea "nesortat" – arată ambele săgeți */
#bulkTable.dataTable thead th.sorting::before,
#bulkTable.dataTable thead th.sorting::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: .75;
}

#bulkTable.dataTable thead th.sorting::before {
  top: 42%;
  border-bottom: 6px solid rgba(255,255,255,.85); /* săgeată sus */
}

#bulkTable.dataTable thead th.sorting::after {
  top: 58%;
  border-top: 6px solid rgba(255,255,255,.85);   /* săgeată jos */
}

/* ASC – doar săgeata sus */
#bulkTable.dataTable thead th.sorting_asc::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-60%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #fff;
  opacity: 1;
}
#bulkTable.dataTable thead th.sorting_asc::after { content: none !important; }

/* DESC – doar săgeata jos */
#bulkTable.dataTable thead th.sorting_desc::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-40%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid #fff;
  opacity: 1;
}
#bulkTable.dataTable thead th.sorting_desc::before { content: none !important; }