* {
	margin: 0;
}
html, body {
	height: 100%;}

img {
border:0;}

body {
	background:#fff;
 	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
}


.hide { display:none;}

.sus {
	text-align:left; 
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
	background: url(img/bg_head.jpg) repeat-x; 
}

.header {
 	min-width:1000px;
 	height:50px;
	font-size:14px;
	}

.header h2 {
color: #000;
padding:10px 0 0 10px;
}

h2 {
font-size: 18px;	
color: #090;
margin-bottom:10px;
}

h3 {
font-size: 16px;	
color: #970000;
padding:0 0 5px  10px;
}

.header h3 {
margin:15px 0 0 40px;
padding:2px;
border:1px #FFFFFF solid;
background: #999;
color:#FFFFFF;
}

.info{
text-align:center;
margin:6px 10px 0 0;
font-size:12px;
border:1px #FFFFFF solid;
background: #999;
color:#FFFFFF;
padding:2px;
}



.left {
float:left;
}

.right {
float:right;
}
	

.content {
z-index:10 !important;
font-weight:normal;
min-width:1200px;
margin:0;
padding:10px;
text-align:justify;
}

.content p {
padding:10px 5px;
text-align:left;
}

.content a{
text-decoration:none;
color:#970000;
font-weight:700;
}

.content a:hover {
color:#999;
}

.content table p{
margin:5px;
padding:0px;
text-align:left;}

.content table td{
vertical-align:top;
}

.jos, .push {
     height: 50px;
	 clear: both;
}

.jos {
 	background: url(img/bg_footeradmin.jpg) repeat-x;
 	text-align:right;
 	margin:0;
 	
}

.clear {
clear:both;
}

.textarea {
	float:left;
	margin-top:10px;}
	

/* pentru meniul de admin
   Blocul legacy de mai jos ramane doar ca reset minim.
   Stilul real al meniului este definit mai jos, in varianta moderna. */
#nav,
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li {
	position: relative;
	list-style: none;
}

#nav a {
	display: block;
	text-decoration: none;
}

#nav ul {
	display: none;
	position: absolute;
}

#nav:after {
	content: "";
	display: block;
	clear: both;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
/*sfarsit meniul admin*/

#error {
	color:#ff0000;
	margin:5px 20px;	
	font-weight:normal;
	}

.form textarea {
border:1px #000 solid;
padding: 5px 3px;
background:#FFF;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
    border-radius:6px;
	behavior: url(PIE.htc);
} 

.form .textfield {
height:16px;
font-size:14px;
font-family: Arial, Helvetica, sans-serif;
width:350px;
border:1px #000 solid;
padding: 5px 3px;
float:left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;
behavior: url(PIE.htc);
}

.form input:hover, select:hover, textarea:hover,
.form input:focus, select:focus, textarea:focus {
	-webkit-box-shadow: 0 1px 1px #000;
	-moz-box-shadow: 0 1px 1px #000;
	box-shadow: 0 1px 1px #000;
	behavior: url(PIE.htc);
	}

.form .submit {
	margin-left:200px;
	
}

.form .submit-button {
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
    color: #000;
	font-weight:700;
	font-style:italic;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #FFF;
    text-decoration: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #ffcc66;
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffbc47 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #ffbc47), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc66', endColorstr='#ffe6b6', GradientType=0 );
    cursor: pointer;
	behavior: url(PIE.htc);
	}

.form .submit input:focus, .form .submit input:hover{
	background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffe6b6 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #fff), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b6', endColorstr='#ffe6b6', GradientType=0 );
	behavior: url(PIE.htc);
	}

.form p {line-height:29px;
margin-bottom:2px;}

.form p label {
line-height:29px;
float:left;
width:140px;
font-weight:700;
}

.form  {line-height:18px;}

.form select {
	border:1px #000 solid;
	padding: 5px 3px;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;
	behavior: url(PIE.htc);
}

.form legend { 
	font-weight:bold;
	font-size: 16px;		
	color: #970000;
	margin-left:10px;
}

.form label {
	top:0px;
	text-align:left;
}

.color {
	background:#90ff88;}
	
#response {
	padding:10px;
	background-color:#9F9;
	border:2px solid #396;
	margin-bottom:10px;
}

#list li {padding:4px 8px; color:#000; font-weight:700; cursor:move; list-style:none; width:800px; background:#ddd; margin:10px 0 0 0; border:1px solid #999;}

#list1 ul {display:inline;}

#list1 li {text-align:center; float:left;padding:5px; width:150px; color:#000; font-weight:700; cursor:move; list-style:none; background:#ddd; margin:10px 10px 0 0; border:1px solid #999;}

body {
	background: #f4f7fb;
	color: #152033;
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	text-align: left;
}

.sus {
	background: linear-gradient(180deg, #eaf1fb 0%, #f7f9fd 110px, #f4f7fb 110px);
}

.header,
#nav,
.content {
	max-width: 1380px;
	margin-left: auto;
	margin-right: auto;
}

.header {
	min-width: 0;
	padding: 0 18px;
	box-sizing: border-box;
}

.content {
	min-width: 0;
	padding: 20px 18px 36px;
	box-sizing: border-box;
}

#nav {
	min-width: 0;
	box-sizing: border-box;
}

.content table {
	border-collapse: collapse;
}

.content table td,
.content table th {
	padding: 10px 12px;
}

.page-shell {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.page-hero,
.panel,
.stats-card,
.mini-card,
.stack-card {
	background: #ffffff;
	border: 1px solid #dbe5f1;
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(16, 35, 63, 0.08);
}

.page-hero {
	padding: 22px 24px;
}

.page-hero-title {
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.15;
	color: #0f2746;
}

.page-hero-description {
	margin: 0;
	color: #54657d;
	line-height: 1.6;
}

.page-shell p {
	padding: 0;
}

.page-shell a {
	text-decoration: none;
}

.panel {
	padding: 22px 24px;
}

.panel-title {
	margin: 0 0 14px;
	font-size: 21px;
	line-height: 1.25;
	color: #0f2746;
}

.panel-subtitle {
	margin: -6px 0 16px;
	color: #60738d;
	line-height: 1.55;
}

.panel-grid,
.stats-grid,
.filter-grid,
.stack-cards {
	display: grid;
	gap: 16px;
}

.panel-grid.two,
.stats-grid.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-grid.three,
.stats-grid.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filter-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.login-shell {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(340px, 0.92fr) minmax(420px, 1.08fr);
	gap: 24px;
	align-items: stretch;
}

.login-hero,
.login-panel {
	height: 100%;
}

.login-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 34px 34px 36px;
	text-align: left;
	background:
		radial-gradient(circle at top right, rgba(40, 116, 208, 0.12), transparent 34%),
		linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.login-kicker {
	align-self: flex-start;
}

.login-stats {
	margin-top: 6px;
}

.login-panel {
	padding: 30px 32px;
	text-align: left;
}

.login-form {
	gap: 18px;
}

.login-form-grid {
	grid-template-columns: 1fr;
}

.login-field {
	gap: 10px;
}

.login-form .textfield {
	min-height: 56px;
	padding: 14px 16px;
	border-radius: 16px;
	font-size: 15px;
}

.login-form-note {
	margin: 0;
}

.login-submit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.login-submit .submit {
	margin: 0;
}

.login-submit .submit-button {
	min-width: 190px;
	min-height: 52px;
	padding: 0 26px;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.field-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field-block label,
.field-label {
	font-weight: 700;
	color: #14304f;
}

.field-help,
.muted-note,
.table-note,
.meta-note {
	color: #64758b;
	font-size: 13px;
	line-height: 1.5;
}

.page-shell .textfield,
.page-shell textarea,
.page-shell select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 11px 13px;
	border: 1px solid #c6d4e3;
	border-radius: 12px;
	background: #fbfdff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.page-shell textarea {
	min-height: 140px;
	resize: vertical;
}

.page-shell .submit {
	margin: 0;
}

.page-shell .submit-button,
.btn-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #174f9f 0%, #2874d0 100%);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 12px 24px rgba(23, 79, 159, 0.24);
}

.btn-inline.is-secondary,
.page-shell .submit-button.is-secondary {
	background: #eef4fb;
	color: #174f9f;
	box-shadow: none;
	border: 1px solid #d4e0ef;
}

.actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.stats-card {
	padding: 18px 20px;
	text-align: left;
}

.stats-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7d96;
}

.stats-value {
	display: block;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 800;
	color: #10223c;
}

.stats-meta {
	display: block;
	margin-top: 8px;
	color: #5d6e86;
	line-height: 1.45;
	text-align: left;
	text-wrap: pretty;
}

.notice {
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid transparent;
	line-height: 1.55;
}

.notice.is-error {
	background: #fff2f2;
	border-color: #f4b4b4;
	color: #a02727;
}

.notice.is-success {
	background: #effbf2;
	border-color: #9ed4ac;
	color: #18643e;
}

.notice.is-info {
	background: #eef6ff;
	border-color: #bfd8f5;
	color: #1a5389;
}

.pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: #edf3fb;
	color: #194f86;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.linked-chip {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: #f2f7fd;
	color: #174271;
	font-weight: 600;
}

.table-wrap {
	width: 100%;
	overflow-x: auto;
	border-radius: 18px;
	border: 1px solid #dbe5f1;
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(16, 35, 63, 0.08);
}

.data-table {
	width: 100%;
	min-width: 780px;
	border: 0;
}

.data-table thead th {
	background: #eef4fb;
	color: #173252;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.data-table tbody tr:nth-child(even) {
	background: #f9fbfe;
}

.data-table tbody td {
	vertical-align: top;
	border-top: 1px solid #edf2f8;
}

.data-primary {
	font-weight: 800;
	color: #0f2746;
}

.data-secondary {
	display: block;
	margin-top: 5px;
	color: #5d7088;
	line-height: 1.5;
}

.stack-cards {
	display: none;
}

.stack-card {
	padding: 18px;
}

.stack-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-top: 1px solid #edf2f8;
}

.stack-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.stack-label {
	font-weight: 700;
	color: #14304f;
}

.stack-value {
	text-align: right;
	color: #23364f;
}

.empty-state {
	padding: 30px 24px;
	text-align: center;
	border: 1px dashed #c9d7e8;
	border-radius: 18px;
	background: #fbfdff;
	color: #5b708b;
}

@media (max-width: 1100px) {
	.header h2,
	.header h3,
	.header .info {
		float: none;
		display: block;
		margin: 0;
	}

	.header h2 {
		padding: 10px 0 4px;
	}

	.header h3 {
		margin-top: 8px;
		display: inline-block;
	}

	.header .info {
		margin-top: 10px;
		text-align: left;
	}

		.login-shell {
			grid-template-columns: 1fr;
			max-width: 920px;
	}

	.login-hero,
	.login-panel {
		padding: 26px;
	}
}

@media (max-width: 860px) {
	.page-hero,
	.panel,
	.stats-card,
	.stack-card {
		padding: 18px;
	}

	.page-hero-title {
		font-size: 24px;
	}

	.panel-grid.two,
	.panel-grid.three,
	.stats-grid.two,
	.stats-grid.three,
	.filter-grid {
		grid-template-columns: 1fr;
	}

	.data-table {
		min-width: 0;
	}

	.table-wrap {
		display: none;
	}

	.stack-cards {
		display: grid;
	}

	.login-submit {
		flex-direction: column;
		align-items: stretch;
	}

	.login-submit .submit-button {
		width: 100%;
	}
}

@media (max-width: 720px) {
	.content {
		padding: 16px 12px 28px;
	}

	.form p label,
	.form .textfield,
	.form textarea,
	.form select {
		float: none;
		width: 100%;
	}

	.form p {
		line-height: 1.5;
	}

	.form .submit {
		margin-left: 0;
	}

	.actions-row,
	.page-shell .submit {
		flex-direction: column;
		align-items: stretch;
	}

	.page-shell .submit-button,
	.btn-inline {
		width: 100%;
	}
}

.header h2 {
	font-size: 24px;
	font-weight: 800;
	color: #0f2746;
	letter-spacing: -0.02em;
}

.header h3 {
	margin: 14px 0 0 28px;
	padding: 8px 12px;
	border: 1px solid #d7e3f2;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: #1e3c61;
	font-weight: 700;
}

.info {
	margin: 10px 0 0;
	padding: 10px 14px;
	border: 1px solid #d9e4f1;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.78);
	color: #39516e;
}

.jos {
	background: linear-gradient(180deg, #0f2746 0%, #133153 100%);
	color: #d9e5f4;
}

.jos p {
	max-width: 1380px;
	margin: 0 auto;
	padding-right: 18px;
	box-sizing: border-box;
}

.legacy-nav-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: calc(100% - 36px);
	margin: 12px auto 0;
	padding: 14px 18px;
	border: 1px solid #d8e2ef;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.9);
	color: #103155;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
	box-shadow: 0 12px 26px rgba(16, 35, 63, 0.08);
	cursor: pointer;
}

.legacy-nav-toggle-lines {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
}

.legacy-nav-toggle-lines span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background: #174f9f;
}

.legacy-subnav-toggle {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 12px;
	background: rgba(23, 79, 159, 0.1);
	color: #174f9f;
	cursor: pointer;
}

.legacy-subnav-caret {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
}

.legacy-content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: left;
}

.legacy-page-heading {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	color: #0f2746;
	letter-spacing: -0.02em;
}

.legacy-content > p {
	margin: 0;
	padding: 0;
	line-height: 1.65;
	color: #334862;
}

.legacy-result,
.legacy-legend {
	padding: 16px 18px !important;
	border-radius: 18px;
	border: 1px solid #dbe5f1;
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(16, 35, 63, 0.08);
}

.legacy-form-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid #dbe5f1;
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(16, 35, 63, 0.08);
}

.legacy-form-panel p {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	line-height: 1.55;
}

.legacy-form-panel p label {
	flex: 0 0 180px;
	width: 180px;
	line-height: 1.5;
	padding-top: 10px;
	color: #14304f;
}

.required-marker {
	color: #d63b3b;
	font-weight: 900;
}

.legacy-form-panel .textfield,
.legacy-form-panel textarea,
.legacy-form-panel select {
	float: none;
	width: min(100%, 720px);
	max-width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid #c6d4e3;
	border-radius: 14px;
	background: #fbfdff;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.legacy-form-panel textarea {
	min-height: 160px;
	resize: vertical;
}

.legacy-form-panel .textarea {
	float: none;
	width: 100%;
	margin-top: 0;
}

.legacy-form-panel small {
	display: inline-block;
	padding-top: 11px;
	color: #66798f;
	line-height: 1.5;
}

.legacy-form-panel .submit {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
}

.legacy-form-panel .submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #174f9f 0%, #2874d0 100%);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	box-shadow: 0 12px 24px rgba(23, 79, 159, 0.24);
}

.legacy-form-panel .submit-button:hover,
.legacy-form-panel .submit-button:focus {
	background: linear-gradient(135deg, #123f80 0%, #2365b7 100%);
	color: #ffffff;
}

.legacy-form-panel input:hover,
.legacy-form-panel select:hover,
.legacy-form-panel textarea:hover,
.legacy-form-panel input:focus,
.legacy-form-panel select:focus,
.legacy-form-panel textarea:focus {
	box-shadow: 0 0 0 4px rgba(39, 118, 214, 0.14);
	border-color: #7aa6dd;
	outline: none;
}

.legacy-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid #dbe5f1;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(16, 35, 63, 0.08);
}

.legacy-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	background: #ffffff;
}

.legacy-table tr:first-child td,
.legacy-table tr:first-child th {
	background: #eef4fb;
	color: #173252;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.legacy-table td,
.legacy-table th {
	padding: 14px 16px;
	border-top: 1px solid #edf2f8;
	vertical-align: top;
	text-align: left;
}

.legacy-table tr:first-child td,
.legacy-table tr:first-child th {
	border-top: 0;
}

.legacy-table tr:nth-child(even):not(:first-child) {
	background: #f9fbfe;
}

.legacy-notice {
	margin: 0;
}

.legacy-content .notice {
	padding: 14px 16px;
}

.legacy-content .color {
	background: transparent;
}

.legacy-form-panel .color,
.page-shell .color {
	background: transparent;
}

#nav {
	--legacy-subnav-width: 260px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 10px;
	width: calc(100% - 36px);
	max-width: 1380px;
	margin: 12px auto 18px;
	padding: 8px 10px;
	border: 1px solid #dbe5f1;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 16px 36px rgba(16, 35, 63, 0.08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: relative;
	z-index: 30;
	overflow: visible;
	list-style: none;
}

#nav li {
	float: none;
	margin: 0;
	padding: 0;
}

#nav > li {
	display: flex;
	position: relative;
	min-width: 0;
}

#nav > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 999px;
	text-align: center;
	line-height: 1;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#nav > li.has-subnav::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: var(--legacy-subnav-width);
	height: 14px;
	transform: translateX(-50%);
}

#nav > li > a:hover,
#nav > li:hover > a,
#nav .current > a {
	background: linear-gradient(135deg, #174f9f 0%, #2874d0 100%);
	color: #ffffff;
	box-shadow: 0 12px 24px rgba(23, 79, 159, 0.18);
}

#nav ul {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: var(--legacy-subnav-width);
	min-width: var(--legacy-subnav-width);
	padding: 10px;
	border-radius: 18px;
	border: 1px solid #d7e3f2;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 18px 40px rgba(16, 35, 63, 0.14);
	z-index: 40;
}

#nav ul li {
	width: 100%;
}

#nav ul a {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	color: #274160 !important;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
}

#nav ul a:hover {
	background: #eef5ff !important;
	color: #174f9f !important;
}

.service-sheets-page {
	gap: 20px;
}

.content > h2 {
	margin: 0 0 18px;
	position: relative;
	z-index: 1;
}

.service-sort-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
	align-items: center;
}

.service-sort-bar .linked-chip {
	text-decoration: none;
	background: #eef4fb;
	color: #174271;
	font-weight: 800;
	box-shadow: none;
}

.service-list-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.service-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid #dbe5f1;
	border-radius: 22px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	box-shadow: 0 14px 30px rgba(16, 35, 63, 0.08);
}

.service-card-head,
.service-card-footer {
	display: flex;
	justify-content: space-between;
	gap: 10px 14px;
	align-items: flex-start;
}

.service-card-footer {
	padding-top: 2px;
	border-top: 1px solid #edf2f8;
}

.service-card-identity {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.service-card-kicker-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.service-card-id {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: #eef4fb;
	color: #174f9f;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.service-card-doc-type {
	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border-radius: 999px;
	background: #f6f9fd;
	border: 1px solid #dde8f5;
	color: #61738a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.service-card-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.service-status-pill.is-work,
.service-card-status.is-work {
	background: #fff3ba;
	color: #7f5a00;
	border-color: #ffe89a;
}

.service-status-pill.is-parts,
.service-card-status.is-parts {
	background: #ffe1bf;
	color: #a85100;
	border-color: #ffd09a;
}

.service-status-pill.is-fixed,
.service-card-status.is-fixed {
	background: #dff7c7;
	color: #2b6e0d;
	border-color: #ccefb0;
}

.service-status-pill.is-unpaid,
.service-card-status.is-unpaid {
	background: #edf3fb;
	color: #194f86;
	border-color: #d8e5f7;
}

.service-status-pill.is-refused,
.service-card-status.is-refused {
	background: #ffd6d3;
	color: #9d2d2d;
	border-color: #ffc2bc;
}

.service-card-status.is-sale {
	background: #e6f0ff;
	color: #1a4f97;
	border-color: #bfd5fb;
}

.service-card-status.is-sale-paid {
	background: #dff7c7;
	color: #2b6e0d;
	border-color: #ccefb0;
}

.service-card-status.is-sale-unpaid {
	background: #ffe1bf;
	color: #a85100;
	border-color: #ffd09a;
}

.service-card-status.is-rental {
	background: #e6f0ff;
	color: #1a4f97;
	border-color: #bfd5fb;
}

.service-card-status.is-loan {
	background: #dff7f2;
	color: #17695a;
	border-color: #8fd3c4;
}

.service-card-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.14;
	color: #0f2746;
	letter-spacing: -0.02em;
}

.service-card-client {
	margin: 0;
	color: #5a6f88;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.service-card-body {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(250px, 320px);
	gap: 14px 18px;
	align-items: start;
}

.service-card-main,
.service-card-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.service-card-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.service-card-fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid #e5edf7;
	border-radius: 15px;
	background: rgba(248, 251, 255, 0.94);
}

.service-card-fact-label {
	display: block;
	margin-bottom: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6c7d94;
}

.service-card-fact-value {
	display: block;
	color: #173252;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	word-break: break-word;
	text-align: left;
}

.service-card-note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid #e3ecf7;
	border-radius: 16px;
	background: rgba(244, 248, 253, 0.92);
}

.service-card-note-label {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6c7d94;
}

.service-card-note-value {
	margin: 0;
	color: #173252;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.38;
}

.service-card-meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.service-card-meta-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid #e0e9f4;
	border-radius: 16px;
	background: #f7fbff;
	color: #48607d;
	font-size: 12px;
	line-height: 1.35;
}

.service-card-meta-item strong {
	color: #163255;
	margin-right: 0;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.service-card-meta-value {
	display: block;
	color: #173252;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	word-break: break-word;
}

.service-card-total {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border: 1px solid #d8e4f4;
	border-radius: 18px;
	background: linear-gradient(180deg, #f5f9ff 0%, #edf5ff 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.service-card-total-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5f7289;
}

.service-card-total-value {
	color: #11468b;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.service-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	width: 100%;
}

.service-card-actions .btn-inline {
	text-decoration: none;
	color: #ffffff;
	font-weight: 800;
}

.service-card-actions .btn-inline.is-secondary {
	color: #174f9f;
}

.service-card-actions .btn-inline:hover {
	color: #ffffff;
}

.service-card-actions .btn-inline.is-secondary:hover {
	color: #174f9f;
}

.service-card-actions .pill {
	background: #f4f7fb;
	color: #61748c;
}

.client-picker-toolbar,
.sale-client-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.client-picker-search {
	max-width: 420px;
}

.client-picker-grid {
	margin-top: 18px;
}

.client-picker-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.client-picker-name {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	color: #0f2746;
}

.client-picker-line {
	margin: 0;
	color: #52677f;
	line-height: 1.5;
}

.sale-form {
	gap: 18px;
}

.sale-products-panel {
	padding: 20px;
}

.sale-products-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.sale-products-head .panel-title {
	margin-bottom: 6px;
}

.sale-products-head .panel-subtitle {
	margin: 0;
}

.sale-products-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sale-product-row {
	padding: 16px;
	border: 1px solid #dfe8f4;
	border-radius: 20px;
	background: #fbfdff;
}

.sale-product-grid {
	align-items: end;
}

.sale-product-actions {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sale-product-actions .btn-inline {
	align-self: flex-start;
}

.sale-total-card {
	margin-top: 18px;
}

.sale-rental-panel {
	display: none;
	padding: 20px;
}

.sale-rental-grid {
	margin-top: 6px;
}

.sale-rental-stats {
	margin-top: 14px;
}

.sale-rental-stats .stats-card {
	min-height: 0;
}

.sale-status-note {
	display: none;
	margin-top: -4px;
}

.service-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.service-pagination a,
.service-pagination-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #d9e4f1;
	color: #174271;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(16, 35, 63, 0.06);
}

.service-pagination-current {
	background: linear-gradient(135deg, #174f9f 0%, #2874d0 100%);
	border-color: transparent;
	color: #ffffff;
}

.service-pagination a:hover {
	border-color: #99bde8;
	background: #eef5ff;
}

.legacy-form-panel.service-filter-form p {
	align-items: center;
}

.legacy-form-panel.service-filter-form p label {
	padding-top: 0;
}

@media (max-width: 1100px) {
	.service-list-grid {
		grid-template-columns: 1fr;
	}

	.service-card-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.client-picker-grid,
	.sale-product-grid,
	.sale-rental-grid,
	.sale-rental-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 861px) {
	#nav {
		display: grid !important;
	}

	#nav li {
		width: auto !important;
	}

	#nav ul {
		display: none;
		position: absolute;
	}

	#nav > li:hover > ul,
	#nav > li:focus-within > ul {
		display: block;
	}
}

@media (max-width: 860px) {
	#nav > li.has-subnav::after {
		display: none;
	}

	.header {
		padding: 0 12px;
	}

	.legacy-nav-toggle {
		display: inline-flex;
	}

	#nav {
		display: none;
		margin-top: 10px;
		padding: 10px;
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 16px 36px rgba(16, 35, 63, 0.12);
	}

	body.nav-open #nav {
		display: block;
	}

	#nav li {
		margin: 0;
		width: 100%;
	}

	#nav > li > a {
		border-radius: 14px;
		padding: 13px 16px;
	}

	#nav li.has-subnav > a {
		padding-right: 56px;
	}

	.legacy-subnav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	#nav ul {
		display: none;
		position: static;
		width: auto;
		margin: 8px 0 0;
		padding: 8px;
		border-radius: 16px;
		background: #f6faff;
		box-shadow: none;
	}

	#nav li.is-open > ul {
		display: block;
	}

	#nav li:hover > ul {
		display: none;
	}

	#nav li.is-open:hover > ul {
		display: block;
	}

	#nav ul a {
		padding: 8px 12px;
	}

	.content {
		padding: 16px 12px 28px;
	}

	.legacy-page-heading {
		font-size: 24px;
	}

	.legacy-form-panel {
		padding: 18px;
		border-radius: 18px;
	}

	.legacy-form-panel p {
		flex-direction: column;
		gap: 8px;
	}

	.legacy-form-panel p label {
		flex: 0 0 auto;
		width: 100%;
		padding-top: 0;
	}

	.legacy-form-panel .textfield,
	.legacy-form-panel textarea,
	.legacy-form-panel select {
		width: 100%;
	}

	.legacy-form-panel small {
		padding-top: 0;
	}

	.legacy-form-panel .submit,
	.legacy-form-panel .submit-button {
		width: 100%;
	}

	.service-card {
		padding: 18px;
		border-radius: 18px;
	}

	.service-card-title {
		font-size: 18px;
	}

	.service-card-status {
		align-self: flex-start;
	}

	.service-card-body {
		grid-template-columns: 1fr;
	}

	.service-card-summary {
		grid-template-columns: 1fr;
	}

	.service-card-meta {
		width: 100%;
	}

	.client-picker-toolbar,
	.sale-client-hero,
	.sale-products-head {
		flex-direction: column;
		align-items: stretch;
	}

	.client-picker-search {
		max-width: none;
	}

	.client-picker-grid,
	.sale-product-grid,
	.sale-rental-grid,
	.sale-rental-stats {
		grid-template-columns: 1fr;
	}

	.sale-product-actions .btn-inline {
		width: 100%;
		justify-content: center;
	}

	.service-card-actions,
	.service-sort-bar,
	.service-pagination {
		flex-direction: column;
		align-items: stretch;
	}

	.service-card-actions .btn-inline,
	.service-sort-bar .linked-chip,
	.service-pagination a,
	.service-pagination-current {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
	}

	.legacy-table-wrap {
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.legacy-table {
		min-width: 0;
		background: transparent;
	}

	.legacy-table tr {
		display: block;
		margin-bottom: 14px;
		border: 1px solid #dbe5f1;
		border-radius: 18px;
		background: #ffffff;
		box-shadow: 0 14px 34px rgba(16, 35, 63, 0.08);
		overflow: hidden;
	}

	.legacy-table tr:first-child {
		display: none;
	}

	.legacy-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border-top: 1px solid #edf2f8;
		padding: 12px 14px;
	}

	.legacy-table td:first-child {
		border-top: 0;
	}

	.legacy-table td::before {
		content: attr(data-label);
		flex: 0 0 42%;
		font-weight: 700;
		color: #14304f;
	}

	.legacy-table td > * {
		max-width: 56%;
	}

	.jos p {
		padding-right: 12px;
	}
}