:root{
	--bg:#f6f8fb;
	--sidebar:#0563f2;
	--muted:#6b7280;
	--card:#ffffff;
	--accent:#0964ff;
	--success:#10b981;
	--danger:#ef4444;
	--warning:#f59e0b;
}

*{box-sizing:border-box}
body{
	font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
	background:var(--bg);
	margin:0;
	overflow-x:hidden;
}

body.login-page{
	background:
		radial-gradient(circle at 12% 18%, rgba(5,99,242,0.30), transparent 42%),
		radial-gradient(circle at 88% 12%, rgba(56,189,248,0.26), transparent 38%),
		radial-gradient(circle at 72% 82%, rgba(16,185,129,0.20), transparent 34%),
		linear-gradient(160deg, #f3f7ff 0%, #e9eef8 45%, #e3e8f1 100%);
	position:relative;
}

body.login-page::before,
body.login-page::after{
	content:"";
	position:fixed;
	border-radius:50%;
	pointer-events:none;
	filter:blur(2px);
	z-index:0;
}

body.login-page::before{
	width:420px;
	height:420px;
	left:-140px;
	top:20%;
	background:radial-gradient(circle, rgba(5,99,242,0.25) 0%, rgba(5,99,242,0) 70%);
	animation:floatBlobA 14s ease-in-out infinite;
}

body.login-page::after{
	width:360px;
	height:360px;
	right:-120px;
	bottom:8%;
	background:radial-gradient(circle, rgba(14,165,233,0.25) 0%, rgba(14,165,233,0) 70%);
	animation:floatBlobB 16s ease-in-out infinite;
}

.admin-users-page{
	font-family:"Sora",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
}

.admin-users-page .container{
	max-width:1200px;
}

.user-list{
	display:flex;
	flex-direction:column;
	gap:16px;
}

.user-card{
	border:1px solid #e6e9ee;
	border-radius:14px;
	background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
	box-shadow:0 8px 24px rgba(14,30,37,0.06);
	transition:all 0.3s ease;
	overflow:hidden;
}

.user-card[open]{
	border-color:rgba(9,100,255,0.35);
	box-shadow:0 18px 45px rgba(9,100,255,0.12);
}

.user-summary{
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:16px 20px;
}

.user-summary::-webkit-details-marker{
	display:none;
}

.user-ident{
	display:flex;
	align-items:center;
	gap:14px;
}

.user-avatar{
	width:44px;
	height:44px;
	border-radius:14px;
	background:linear-gradient(135deg,#0563f2,#0a54d3);
	color:#fff;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	box-shadow:0 8px 18px rgba(5,99,242,0.3);
	overflow:hidden;
}

.user-avatar img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.user-name{
	font-weight:600;
	color:#101828;
	font-size:16px;
}

.user-sub{
	font-size:12px;
	color:#667085;
}

.user-meta{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
}

.role-badge{
	padding:4px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:600;
}

.role-admin{background:#fee2e2;color:#991b1b;}
.role-manager{background:#dbeafe;color:#1e40af;}
.role-superviseur{background:#e5e7eb;color:#1f2937;}
.role-direction{background:#ede9fe;color:#4c1d95;}
.role-tech{background:#dcfce7;color:#166534;}

.user-site{
	display:flex;
	align-items:center;
	gap:6px;
	color:#475467;
	font-size:13px;
}

.status-pill{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:4px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:600;
}

.status-active{background:#dcfce7;color:#166534;}
.status-inactive{background:#fee2e2;color:#991b1b;}

/* Online/Offline Status Indicators */
.status-presence{
	padding:5px 12px;
	border:1px solid transparent;
	letter-spacing:.01em;
}

.status-presence .presence-dot{
	width:8px;
	height:8px;
	border-radius:999px;
	flex-shrink:0;
	position:relative;
}

.status-online{
	background:#dcfce7;
	color:#166534;
	border-color:#bbf7d0;
}

.status-online .presence-dot{
	background:#22c55e;
	box-shadow:0 0 0 3px rgba(34,197,94,.16);
	animation:pulse 2s ease-in-out infinite;
}

.status-offline{
	background:#f8fafc;
	color:#475467;
	border-color:#e4e7ec;
}

.status-offline .presence-dot{
	background:#98a2b3;
}

/* Last Connection Display */
.last-connection{
	display:flex;
	align-items:center;
	gap:6px;
	color:#64748b;
	font-size:12px;
	font-weight:500;
	padding:4px 10px;
	background:#f8fafc;
	border-radius:999px;
}

.last-connection .fa-clock{
	color:#94a3b8;
	font-size:11px;
}

/* Pulse animation for online indicator */
@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.user-action{
	color:#0f172a;
	font-weight:600;
	font-size:13px;
	display:flex;
	align-items:center;
	gap:8px;
	background:#f8fafc;
	padding:8px 12px;
	border-radius:10px;
}

.user-edit{
	border-top:1px solid #e6e9ee;
	padding:18px 20px 20px;
	background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
	display:grid;
	grid-template-columns:1.2fr 0.8fr;
	gap:18px;
}

.user-form{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px 16px;
}

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

.field label{
	margin:0 0 6px 0;
	font-size:12px;
	font-weight:600;
	color:#344054;
}

.field input,
.field select{
	width:100%;
	padding:10px 12px;
	border:1px solid #e6e9ee;
	border-radius:10px;
	font-size:13px;
}

.checkbox-field{
	grid-column:1 / -1;
}

.checkbox{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:#1f2937;
}

.form-actions{
	grid-column:1 / -1;
	display:flex;
	justify-content:flex-start;
}

.btn{
	border:none;
	border-radius:10px;
	padding:10px 16px;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:8px;
	transition:all 0.25s ease;
}

.btn-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;}
.btn-secondary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;}

.user-danger{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.admin-users-hero{
	margin-bottom:18px;
}

.users-kpi-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
}

.users-kpi-card{
	background:linear-gradient(165deg,#f8fbff 0%,#edf3ff 100%);
	border:1px solid #dbe7ff;
	border-radius:14px;
	padding:14px 16px;
	box-shadow:0 8px 22px rgba(15,23,42,0.06);
}

.users-kpi-success{
	background:linear-gradient(165deg,#effcf6 0%,#e2f8ef 100%);
	border-color:#bbf7d0;
}

.users-kpi-neutral{
	background:linear-gradient(165deg,#f8fafc 0%,#edf2f7 100%);
	border-color:#e2e8f0;
}

.users-kpi-warm{
	background:linear-gradient(165deg,#fff7ed 0%,#ffedd5 100%);
	border-color:#fed7aa;
}

.users-kpi-label{
	font-size:12px;
	font-weight:600;
	color:#64748b;
	text-transform:uppercase;
	letter-spacing:.02em;
}

.users-kpi-value{
	margin-top:6px;
	font-size:28px;
	line-height:1;
	font-weight:800;
	color:#0f172a;
}

.admin-users-panel{
	border:1px solid #e8edf4;
	box-shadow:0 14px 36px rgba(15,23,42,0.08);
}

.admin-users-panel-subtitle{
	margin:-2px 0 14px;
	color:#64748b;
	font-size:13px;
}

.user-card{
	border:1px solid #e6ebf2;
	box-shadow:0 6px 18px rgba(15,23,42,0.05);
}

.user-summary{
	padding:18px 20px;
}

.user-action{
	border:1px solid #e2e8f0;
	background:#f8fafc;
	border-radius:999px;
	padding:8px 14px;
}

@media (max-width: 960px){
	.users-kpi-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.user-summary{
		flex-direction:column;
		align-items:flex-start;
	}
	.user-edit{
		grid-template-columns:1fr;
	}
	.user-form{
		grid-template-columns:1fr;
	}
}

@media (max-width: 560px){
	.users-kpi-grid{
		grid-template-columns:1fr;
	}

	.users-kpi-card{
		padding:12px 14px;
	}

	.users-kpi-value{
		font-size:24px;
	}
}

.permission-grid{
	display:grid;
	gap:10px;
	padding:12px;
	border:1px solid #d8dee6;
	border-radius:12px;
	background:linear-gradient(180deg,#f8fbff 0%,#f3f7ff 100%);
	grid-template-columns:repeat(2,minmax(0,1fr));
}

.permission-item{
	display:grid;
	grid-template-columns:18px 1fr;
	grid-template-areas:
		"check label"
		"check key";
	column-gap:12px;
	row-gap:3px;
	align-items:center;
	padding:11px 12px;
	border:1px solid #d8dee6;
	border-radius:10px;
	background:#fff;
	color:#334155;
	cursor:pointer;
	transition:all .2s ease;
}

.permission-item:hover{
	border-color:#9bc2ff;
	box-shadow:0 8px 20px rgba(9,100,255,0.12);
	transform:translateY(-1px);
}

.permission-item input[type="checkbox"]{
	grid-area:check;
	margin:0;
	width:16px;
	height:16px;
	accent-color:var(--accent);
}

.permission-item .permission-label{
	grid-area:label;
	line-height:1.35;
	font-weight:600;
	font-size:13px;
	color:#1f2937;
}

.permission-item .permission-key{
	grid-area:key;
	font-size:11px;
	font-weight:700;
	letter-spacing:.02em;
	color:#64748b;
	text-transform:uppercase;
}

.permission-item input[type="checkbox"]:checked + .permission-label{
	color:#0f3f99;
}

.permission-item:has(input[type="checkbox"]:checked){
	border-color:#6ea8ff;
	background:linear-gradient(180deg,#edf4ff 0%,#f7faff 100%);
	box-shadow:0 10px 24px rgba(9,100,255,0.16);
}

.permission-hint{
	display:block;
	margin-top:8px;
	font-size:12px;
	color:#64748b;
}

.materiel-stats-page .container{
	max-width:1220px;
	padding-bottom:22px;
}

.materiel-breadcrumb{
	padding:12px 0;
	margin-bottom:12px;
	animation:slideInDown .5s ease-out;
}

.materiel-breadcrumb-trail{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:14px;
	color:#64748b;
}

.materiel-breadcrumb-link{
	color:#64748b;
	text-decoration:none;
	transition:color .2s ease;
}

.materiel-breadcrumb-link:hover{
	color:#0b58da;
}

.materiel-breadcrumb-sep{
	font-size:10px;
}

.materiel-breadcrumb-current{
	color:#0563f2;
	font-weight:600;
}

.materiel-hero{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:16px;
	padding:20px 0;
	border-bottom:2px solid #e6e9ee;
	margin-bottom:30px;
	animation:slideInDown .6s ease-out;
}

.materiel-hero-title-wrap{
	display:flex;
	align-items:center;
	gap:12px;
}

.materiel-hero-mark{
	width:50px;
	height:50px;
	border-radius:12px;
	background:linear-gradient(140deg,#0091d5,#0d67d8);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	color:#fff;
	font-size:20px;
	box-shadow:0 10px 22px rgba(13,103,216,.26);
}

.materiel-hero-title{
	margin:0;
	color:#111827;
	font-size:30px;
	line-height:1.1;
	letter-spacing:-.02em;
	display:flex;
	align-items:center;
	gap:10px;
}

.materiel-hero-title i{
	color:var(--accent);
}

.materiel-hero-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	justify-content:flex-end;
}

.materiel-action-btn{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 16px;
	border-radius:10px;
	text-decoration:none;
	font-weight:700;
	font-size:13px;
	border:1px solid transparent;
	transition:all .25s ease;
	box-shadow:0 6px 16px rgba(15,23,42,.08);
}

.materiel-action-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 20px rgba(15,23,42,.14);
}

.materiel-action-csv{background:linear-gradient(135deg,#10b981,#059669);color:#fff;}
.materiel-action-excel{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;}
.materiel-action-pdf{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;}
.materiel-action-tickets{background:linear-gradient(135deg,#0563f2,#0a54d3);color:#fff;}
.materiel-action-back{background:#f1f5f9;color:#334155;border-color:#d8e0ea;box-shadow:none;}

.materiel-kpi-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:16px;
	margin-bottom:30px;
	animation:slideInUp .6s ease-out .1s both;
}

.materiel-kpi-card{
	color:#fff;
	padding:22px;
	border-radius:14px;
	box-shadow:0 10px 24px rgba(15,23,42,.14);
	position:relative;
	overflow:hidden;
}

.materiel-kpi-card::after{
	content:'';
	position:absolute;
	inset:auto -18px -20px auto;
	width:90px;
	height:90px;
	border-radius:999px;
	background:rgba(255,255,255,.16);
}

.materiel-kpi-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:12px;
	font-size:14px;
	font-weight:600;
	opacity:.95;
}

.materiel-kpi-head i{
	font-size:22px;
	opacity:.9;
}

.materiel-kpi-value{
	font-size:34px;
	font-weight:800;
	line-height:1;
}

.materiel-kpi-total{background:linear-gradient(135deg,#8b5cf6,#7c3aed);}
.materiel-kpi-ok{background:linear-gradient(135deg,#06b6d4,#0891b2);}
.materiel-kpi-breakdown{background:linear-gradient(135deg,#ec4899,#db2777);}
.materiel-kpi-repair{background:linear-gradient(135deg,#f59e0b,#d97706);}
.materiel-kpi-offline{background:linear-gradient(135deg,#6b7280,#4b5563);}
.materiel-kpi-availability{background:linear-gradient(135deg,#10b981,#059669);}

.materiel-site-section-title{
	color:#0f172a;
	margin:32px 0 20px;
	display:flex;
	align-items:center;
	gap:10px;
	font-size:24px;
	animation:slideInUp .6s ease-out .15s both;
}

.materiel-site-section-title i{
	color:var(--accent);
}

.materiel-site-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:18px;
	animation:slideInUp .6s ease-out .2s both;
}

.materiel-site-card{
	background:#fff;
	border-radius:14px;
	padding:20px;
	border:1px solid #e8edf4;
	box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.materiel-site-card-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom:16px;
	gap:10px;
}

.materiel-site-name{
	margin:0 0 8px;
	color:#0f172a;
	font-size:19px;
	font-weight:700;
}

.materiel-site-total{
	color:#667085;
	font-size:14px;
}

.materiel-site-total span{
	color:var(--accent);
	font-weight:700;
}

.materiel-site-badge{
	width:58px;
	height:58px;
	border-radius:10px;
	background:linear-gradient(135deg,var(--accent),#005dd9);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-weight:800;
	font-size:19px;
	box-shadow:0 10px 22px rgba(9,100,255,.22);
}

.materiel-site-mini-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	margin-bottom:14px;
}

.materiel-mini{
	padding:9px;
	border-radius:8px;
	text-align:center;
	border:1px solid transparent;
}

.materiel-mini-label{
	font-size:11px;
	font-weight:700;
	margin-bottom:2px;
	text-transform:uppercase;
	letter-spacing:.02em;
}

.materiel-mini-value{
	font-size:20px;
	font-weight:800;
	line-height:1.1;
}

.materiel-mini-ok{background:#e6f5ff;border-color:#b8e7ff;color:#0c4a6e;}
.materiel-mini-breakdown{background:#ffe7eb;border-color:#ffc9d3;color:#9f1239;}
.materiel-mini-repair{background:#fff4dc;border-color:#ffe5a8;color:#92400e;}
.materiel-mini-offline{background:#edf1f5;border-color:#d9e0e8;color:#475569;}

.materiel-site-chart-wrap{
	height:210px;
	padding:6px;
	border:1px solid #edf2f7;
	border-radius:10px;
	background:#fcfdff;
}

.materiel-site-foot{
	margin-top:12px;
	padding-top:12px;
	border-top:1px solid #e5e7eb;
	font-size:13px;
	color:#667085;
}

.materiel-site-foot-line{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.materiel-site-foot strong{
	color:#10b981;
	font-size:14px;
}

@media (max-width:980px){
	.permission-grid{
		grid-template-columns:1fr;
	}

	.materiel-hero{
		flex-direction:column;
		align-items:flex-start;
	}

	.materiel-hero-actions{
		width:100%;
	}

	.materiel-action-btn{
		justify-content:center;
	}

	.materiel-kpi-value{
		font-size:30px;
	}
}

@media (max-width:640px){
	.materiel-hero-title{
		font-size:24px;
	}

	.materiel-hero-actions{
		display:grid;
		grid-template-columns:1fr;
	}

	.materiel-site-mini-grid{
		grid-template-columns:1fr;
	}
}

/* Animations */
@keyframes fadeIn {
	from{opacity:0}
	to{opacity:1}
}

@keyframes slideInDown {
	from{opacity:0;transform:translateY(-20px)}
	to{opacity:1;transform:translateY(0)}
}

@keyframes slideInUp {
	from{opacity:0;transform:translateY(20px)}
	to{opacity:1;transform:translateY(0)}
}

@keyframes slideInLeft {
	from{opacity:0;transform:translateX(-30px)}
	to{opacity:1;transform:translateX(0)}
}

@keyframes slideInRight {
	from{opacity:0;transform:translateX(30px)}
	to{opacity:1;transform:translateX(0)}
}

@keyframes bounce {
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-10px)}
}

@keyframes floatBlobA {
	0%,100%{transform:translateY(0) translateX(0)}
	50%{transform:translateY(-18px) translateX(12px)}
}

@keyframes floatBlobB {
	0%,100%{transform:translateY(0) translateX(0)}
	50%{transform:translateY(16px) translateX(-10px)}
}

@keyframes pulse {
	0%,100%{opacity:1}
	50%{opacity:0.7}
}

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

@keyframes float {
	0%,100%{transform:translateY(0px)}
	50%{transform:translateY(-12px)}
}

/* Layout */
.app{
	display:flex;
	min-height:100vh;
	align-items:stretch;
	animation:fadeIn 0.6s ease-in
}

body.login-page .app{
	position:relative;
	z-index:1;
}

.sidebar{
	width:260px;
	background:linear-gradient(180deg,var(--sidebar),#0a54d3);
	color:#fff;
	padding:24px 16px;
	display:flex;
	flex-direction:column;
	gap:18px;
	animation:slideInLeft 0.6s ease-out
}

.logo{
	display:flex;
	align-items:center;
	gap:12px;
	font-weight:700;
	font-size:20px;
	animation:slideInDown 0.6s ease-out 0.1s both
}

.logo .mark{
	width:45px;
	height:45px;
	border-radius:10px;
	background:linear-gradient(135deg,#fff,#f0f0f0);
	color:var(--sidebar);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	font-size:18px;
	box-shadow:0 4px 15px rgba(0,0,0,0.15);
	transition:all 0.3s ease;
	animation:slideInDown 0.6s ease-out 0.15s both
}

.logo .mark:hover{
	transform:scale(1.1) rotate(-5deg);
	box-shadow:0 6px 20px rgba(0,0,0,0.25)
}

.nav{flex:1}

.nav a{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px;
	border-radius:8px;
	color:rgba(255,255,255,0.95);
	text-decoration:none;
	margin-bottom:6px;
	transition:all 0.3s ease;
	position:relative;
	overflow:hidden;
}

.nav a::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:3px;
	height:100%;
	background:#fff;
	transform:scaleY(0);
	transition:transform 0.3s ease;
}

.nav a:hover{
	background:rgba(255,255,255,0.12);
	padding-left:16px;
}

.nav a:hover::before{
	transform:scaleY(1)
}

.nav a.active{
	background:rgba(255,255,255,0.15);
	font-weight:600
}

.sidebar .bottom{
	font-size:13px;
	color:rgba(255,255,255,0.8);
	animation:slideInUp 0.6s ease-out 0.3s both
}

.main{
	flex:1;
	padding:40px;
	animation:slideInRight 0.6s ease-out;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:100vh;
}

.topbar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:24px;
	animation:slideInDown 0.6s ease-out 0.1s both;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	padding:20px 40px;
	margin:0;
}

/* Card */
.card{
	background:var(--card);
	border-radius:12px;
	padding:28px;
	box-shadow:0 6px 20px rgba(14,30,37,0.06);
	max-width:520px;
	animation:slideInUp 0.6s ease-out 0.2s both;
	transition:all 0.3s ease;
}

.card:hover{
	box-shadow:0 12px 35px rgba(14,30,37,0.12);
	transform:translateY(-5px)
}

/* Professional Login Card */
.login-card{
	border:1px solid rgba(255,255,255,0.4);
	background:linear-gradient(180deg,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.92) 100%);
	backdrop-filter:blur(10px);
	padding:0;
	width:min(100%, 780px);
	max-width:780px;
	overflow:visible;
}

/* Login Layout */
.login-wrap{
	display:grid;
	grid-template-columns:120px minmax(0,1fr);
	align-items:center;
	gap:34px;
	padding:34px;
}

/* Logo Section */
.login-logo-section{
	flex:0 0 auto;
	text-align:center;
	animation:slideInDown 0.7s ease-out 0.2s both;
}

.login-logo{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
}

.login-logo-icon{
	width:86px;
	height:86px;
	border-radius:16px;
	background:linear-gradient(135deg,#0563f2 0%,#0a54d3 100%);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	color:#fff;
	font-size:32px;
	box-shadow:0 12px 32px rgba(5,99,242,0.35);
	animation:float 3s ease-in-out infinite;
}

.login-logo-text{
	font-size:14px;
	font-weight:600;
	color:#0f172a;
	letter-spacing:0.2px;
}

/* Form Section */
.login-form{
	width:100%;
	min-width:0;
	animation:slideInUp 0.7s ease-out 0.3s both;
}

.login-header{
	margin-bottom:20px;
}

.login-form h1{
	margin:0 0 8px;
	font-size:22px;
	font-weight:800;
	color:#0f172a;
	letter-spacing:-0.5px;
	display:flex;
	align-items:center;
	gap:10px;
}

.login-form h1 i{
	color:var(--accent);
	font-size:20px;
}

.login-subtitle{
	margin:0;
	font-size:13px;
	color:#64748b;
	font-weight:500;
	line-height:1.5;
}

/* Alert Messages */
.login-alert{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:20px;
	padding:12px 16px;
	border-radius:12px;
	font-size:14px;
	font-weight:500;
	border-left:4px solid;
	animation:slideInDown 0.5s ease-out;
}

.login-alert-success{
	background:#ecfdf5;
	color:#166534;
	border-left-color:#10b981;
}

.login-alert-success i{
	color:#10b981;
}

.login-alert-error{
	background:#ffebee;
	color:#b00020;
	border-left-color:#ef4444;
}

.login-alert-error i{
	color:#ef4444;
}

/* Form Content */
.login-form-content{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-bottom:18px;
}

.form-group{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.form-group label{
	font-size:13px;
	font-weight:600;
	color:#344054;
	display:flex;
	align-items:center;
	gap:8px;
}

.form-group label i{
	font-size:14px;
	color:var(--accent);
	width:14px;
}

.form-input{
	width:100%;
	padding:10px 12px;
	border:2px solid #e6e9ee;
	border-radius:9px;
	font-size:14px;
	font-weight:500;
	color:#0f172a;
	background:#fff;
	transition:all 0.3s ease;
	font-family:inherit;
}

.form-input::placeholder{
	color:#94a3b8;
}

.form-input:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 4px rgba(9,100,255,0.1);
	transform:translateY(-2px);
}

.form-input:hover{
	border-color:#d1d5db;
}

/* Professional Login Button */
.login-button{
	width:100%;
	background:linear-gradient(135deg,var(--accent),#005dd9);
	color:#fff;
	border:none;
	padding:11px 20px;
	border-radius:9px;
	cursor:pointer;
	font-weight:700;
	font-size:14px;
	transition:all 0.3s ease;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	position:relative;
	overflow:hidden;
	box-shadow:0 8px 20px rgba(5,99,242,0.25);
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.login-button::before{
	content:'';
	position:absolute;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.2);
	transition:left 0.4s ease;
}

.login-button:hover{
	transform:translateY(-2px);
	box-shadow:0 12px 28px rgba(5,99,242,0.35);
}

.login-button:hover::before{
	left:100%;
}

.login-button:active{
	transform:translateY(0);
	box-shadow:0 4px 12px rgba(5,99,242,0.2);
}

/* Footer */
.login-footer{
	text-align:center;
	padding-top:8px;
	font-size:13px;
	color:#64748b;
}

.login-link{
	color:var(--accent);
	text-decoration:none;
	font-weight:600;
	transition:all 0.3s ease;
}

.login-link:hover{
	color:#005dd9;
	text-decoration:underline;
}

/* Generic Label */
label{
	display:block;
	margin:12px 0;
	font-size:14px;
	font-weight:500;
	color:#333;
	animation:slideInRight 0.6s ease-out forwards;
}

input,textarea,select{
	width:100%;
	padding:12px 14px;
	border:2px solid #e6e9ee;
	border-radius:8px;
	font-size:15px;
	transition:all 0.3s ease;
	font-family:inherit;
}

input:focus,textarea:focus,select:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(9,100,255,0.1);
	transform:translateY(-2px)
}

button{
	background:linear-gradient(135deg,var(--accent),#005dd9);
	color:#fff;
	border:none;
	padding:12px 24px;
	border-radius:8px;
	cursor:pointer;
	font-weight:600;
	font-size:15px;
	transition:all 0.3s ease;
	display:inline-flex;
	align-items:center;
	gap:8px;
	position:relative;
	overflow:hidden;
	animation:slideInUp 0.6s ease-out 0.4s both;
}

button::before{
	content:'';
	position:absolute;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.2);
	transition:left 0.3s ease;
}

button:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(9,100,255,0.3)
}

button:hover::before{
	left:100%
}

button:active{
	transform:translateY(0)
}

.small-link{
	font-size:13px;
	color:var(--muted);
	text-decoration:none;
	transition:all 0.3s ease;
	cursor:pointer;
}

.small-link:hover{
	color:var(--accent);
	text-decoration:underline
}

/* Container */
.container{
	max-width:1200px;
	margin:0 auto;
	padding:20px;
	animation:fadeIn 0.6s ease-in
}

.container header{
	animation:slideInDown 0.6s ease-out
}

.container header h1{
	animation:slideInLeft 0.6s ease-out 0.1s both
}

.container header nav{
	animation:slideInRight 0.6s ease-out 0.1s both
}

.container nav a:not(.nav-btn):not(.dropdown-item){
	color:var(--accent);
	text-decoration:none;
	transition:all 0.3s ease;
	margin:0 8px;
}

.container nav a:not(.nav-btn):not(.dropdown-item):hover{
	color:#0050cc;
	text-decoration:underline
}

/* Sections */
.new-ticket,.list{
	animation:slideInUp 0.6s ease-out both;
	margin:30px 0
}

.new-ticket{animation-delay:0.2s}
.list{animation-delay:0.3s}

.new-ticket h2,.list h2{
	margin-top:0;
	color:#000
}

.list ul{
	list-style:none;
	padding:0;
	margin:0
}

.list li{
	padding:12px 16px;
	margin:8px 0;
	background:#fff;
	border-radius:8px;
	transition:all 0.3s ease;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
	animation:slideInLeft 0.4s ease-out forwards;
}

.list li:hover{
	transform:translateX(5px);
	box-shadow:0 4px 12px rgba(0,0,0,0.1)
}

.list li a{
	color:var(--accent);
	text-decoration:none;
	font-weight:500;
	transition:all 0.3s ease
}

.list li a:hover{
	color:#0050cc
}

.status{
	float:right;
	padding:4px 12px;
	background:#f0f0f0;
	border-radius:20px;
	font-size:12px;
	font-weight:600;
	color:#666;
	transition:all 0.3s ease
}

.list li:hover .status{
	background:var(--accent);
	color:#fff
}

/* Responsive */
@media(max-width:880px){
	.sidebar{display:none}
	.main{padding:20px}
	.login-wrap{flex-direction:column;gap:24px}
	
	/* Mobile Header Improvements */
	header{
		flex-direction:column !important;
		gap:16px !important;
	}
	
	nav{
		flex-wrap:wrap !important;
		justify-content:center !important;
	}
	
	/* Mobile Dropdown */
	.dropdown-content{
		position:fixed !important;
		left:50% !important;
		transform:translateX(-50%) !important;
		max-width:90vw;
	}
	
	/* Mobile Cards */
	.container{
		padding:0 12px !important;
	}
}

@media (max-width:768px){
	.container{
		padding:12px !important;
	}

	input,
	textarea,
	select,
	button{
		font-size:16px;
	}

	/* Login responsive */
	.login-wrap{
		grid-template-columns:1fr;
		gap:24px;
		padding:26px 18px;
	}

	.login-logo-section{
		flex:0 0 auto;
	}

	.login-form{
		width:100%;
	}

	.login-form h1{
		font-size:20px;
	}

	.login-subtitle{
		font-size:13px;
	}
}

@media (max-width:480px){
	.container{
		padding:10px !important;
	}
}

/* PWA Install Button */
#pwa-install-btn{
	display:none;
	position:fixed;
	bottom:20px;
	right:20px;
	padding:12px 20px;
	background:linear-gradient(135deg,#10b981,#059669);
	color:#fff;
	border:none;
	border-radius:50px;
	font-weight:600;
	box-shadow:0 4px 20px rgba(16,185,129,0.4);
	cursor:pointer;
	z-index:9999;
	animation:bounce 2s infinite;
	font-size:14px;
}

#pwa-install-btn:hover{
	transform:scale(1.05);
	box-shadow:0 6px 25px rgba(16,185,129,0.5);
}

/* PWA Splash Screen */
@media (display-mode: standalone){
	body{
		padding-top:env(safe-area-inset-top);
		padding-bottom:env(safe-area-inset-bottom);
	}
}

/* Utility */
.text-center{text-align:center}
.mb-8{margin-bottom:8px}
.mb-16{margin-bottom:16px}
.icon{display:inline-flex;align-items:center;justify-content:center}

/* Loading Spinner */
.loading-spinner{
	display:inline-block;
	width:20px;
	height:20px;
	border:3px solid rgba(255,255,255,0.3);
	border-radius:50%;
	border-top-color:#fff;
	animation:spin 0.8s linear infinite;
}

.loading-overlay{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	animation:fadeIn 0.2s ease-out;
}

.loading-content{
	background:#fff;
	padding:30px 40px;
	border-radius:12px;
	box-shadow:0 10px 40px rgba(0,0,0,0.2);
	text-align:center;
}

.loading-content .spinner{
	width:40px;
	height:40px;
	border:4px solid #e6e9ee;
	border-radius:50%;
	border-top-color:#0563f2;
	animation:spin 0.8s linear infinite;
	margin:0 auto 16px;
}

.loading-content p{
	margin:0;
	color:#666;
	font-weight:600;
}

/* Toast Notifications */
.toast{
	position:fixed;
	top:20px;
	right:20px;
	min-width:300px;
	padding:16px 20px;
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 20px rgba(0,0,0,0.15);
	display:flex;
	align-items:center;
	gap:12px;
	z-index:10000;
	animation:slideInRight 0.3s ease-out, slideOutRight 0.3s ease-out 2.7s;
}

.toast.success{
	border-left:4px solid #10b981;
}

.toast.error{
	border-left:4px solid #ef4444;
}

.toast.warning{
	border-left:4px solid #f59e0b;
}

.toast.info{
	border-left:4px solid #0563f2;
}

.toast-icon{
	font-size:24px;
}

.toast.success .toast-icon{color:#10b981}
.toast.error .toast-icon{color:#ef4444}
.toast.warning .toast-icon{color:#f59e0b}
.toast.info .toast-icon{color:#0563f2}

.toast-content{
	flex:1;
}

.toast-title{
	font-weight:600;
	color:#101828;
	margin:0 0 4px 0;
	font-size:14px;
}

.toast-message{
	margin:0;
	color:#667085;
	font-size:13px;
}

.toast-close{
	background:none;
	border:none;
	color:#94a3b8;
	cursor:pointer;
	font-size:18px;
	padding:0;
	width:24px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:4px;
	transition:all 0.2s;
}

.toast-close:hover{
	background:#f1f5f9;
	color:#475569;
}

@keyframes slideInRight{
	from{
		transform:translateX(400px);
		opacity:0;
	}
	to{
		transform:translateX(0);
		opacity:1;
	}
}

@keyframes slideOutRight{
	from{
		transform:translateX(0);
		opacity:1;
	}
	to{
		transform:translateX(400px);
		opacity:0;
	}
}

/* Button Loading State */
button.loading{
	position:relative;
	color:transparent !important;
	pointer-events:none;
}

button.loading::after{
	content:'';
	position:absolute;
	width:16px;
	height:16px;
	top:50%;
	left:50%;
	margin-left:-8px;
	margin-top:-8px;
	border:2px solid rgba(255,255,255,0.3);
	border-radius:50%;
	border-top-color:#fff;
	animation:spin 0.6s linear infinite;
}

/* Error State */
.error-message{
	background:#fef2f2;
	border-left:4px solid #ef4444;
	padding:16px 20px;
	border-radius:8px;
	color:#991b1b;
	display:flex;
	align-items:center;
	gap:12px;
	margin:16px 0;
	animation:slideInDown 0.3s ease-out;
}

.error-message i{
	font-size:20px;
	color:#ef4444;
}

/* Success State */
.success-message{
	background:#f0fdf4;
	border-left:4px solid #10b981;
	padding:16px 20px;
	border-radius:8px;
	color:#065f46;
	display:flex;
	align-items:center;
	gap:12px;
	margin:16px 0;
	animation:slideInDown 0.3s ease-out;
}

.success-message i{
	font-size:20px;
	color:#10b981;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
	
	.search-form {
		grid-template-columns: 1fr;
	}
	
	header nav {
		flex-direction: column;
		align-items: stretch;
	}
	
	header nav a,
	header nav button {
		width: 100%;
		justify-content: center;
	}
}

/* Loading Spinner Animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Pulse Animation for Notifications */
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* Enhanced Transitions */
* {
	transition: background-color 0.3s ease, color 0.3s ease;
}