body{
background:
radial-gradient(circle at 20% 10%, rgba(56,189,248,.25), transparent 35%),
radial-gradient(circle at 90% 20%, rgba(37,99,235,.28), transparent 30%),
linear-gradient(135deg,#06111f,#0f172a)!important;
color:#eaf2ff!important;
}

.top{
background:linear-gradient(135deg,#071a33,#0b4f9c,#06142e)!important;
box-shadow:0 18px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.nav{
background:rgba(8,18,34,.88)!important;
backdrop-filter:blur(14px)!important;
padding:16px!important;
gap:14px!important;
border-bottom:1px solid rgba(255,255,255,.12)!important;
}

.nav button{
background:linear-gradient(145deg,#1e3a5f,#0f172a)!important;
color:#f8fbff!important;
border:1px solid rgba(148,197,255,.22)!important;
border-radius:22px!important;
min-height:78px!important;
min-width:145px!important;
box-shadow:
0 14px 28px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -12px 22px rgba(0,0,0,.25)!important;
text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
transform:translateY(0)!important;
}

.nav button:hover{
transform:translateY(-3px)!important;
}

.nav button.active{
background:linear-gradient(145deg,#38bdf8,#0b72e7,#063b86)!important;
box-shadow:
0 0 28px rgba(56,189,248,.45),
0 18px 34px rgba(11,114,231,.35),
inset 0 1px 0 rgba(255,255,255,.35)!important;
}

.panel,.card{
background:linear-gradient(145deg,rgba(30,41,59,.96),rgba(15,23,42,.98))!important;
color:#f8fafc!important;
border:1px solid rgba(148,197,255,.18)!important;
border-radius:26px!important;
box-shadow:
0 24px 55px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.14)!important;
}

.btn{
background:linear-gradient(145deg,#38bdf8,#0b72e7,#064fa8)!important;
border-radius:16px!important;
box-shadow:0 12px 26px rgba(11,114,231,.35), inset 0 1px 0 rgba(255,255,255,.30)!important;
}

input,select,textarea{
background:rgba(15,23,42,.92)!important;
color:white!important;
border:1px solid rgba(148,197,255,.25)!important;
border-radius:16px!important;
box-shadow:inset 0 2px 10px rgba(0,0,0,.25)!important;
}

.shift{
background:linear-gradient(145deg,#123b66,#0f2444)!important;
color:white!important;
border-left:5px solid #38bdf8!important;
box-shadow:0 12px 24px rgba(0,0,0,.30)!important;
}

@media(max-width:700px){
.nav{
display:grid!important;
grid-template-columns:repeat(2,1fr)!important;
overflow:visible!important;
}
.nav button{
min-width:0!important;
min-height:105px!important;
font-size:14px!important;
white-space:normal!important;
}
.grid,.cards{
grid-template-columns:1fr!important;
}
}

/* ===== LED Glow Around Buttons ===== */
.nav button{
position:relative!important;
overflow:hidden!important;
border:1px solid rgba(56,189,248,.45)!important;
box-shadow:
0 0 12px rgba(56,189,248,.25),
0 0 28px rgba(56,189,248,.18),
inset 0 0 18px rgba(56,189,248,.10),
inset 0 1px 0 rgba(255,255,255,.22)!important;
}

.nav button::before{
content:""!important;
position:absolute!important;
inset:-2px!important;
border-radius:inherit!important;
padding:2px!important;
background:linear-gradient(
120deg,
rgba(56,189,248,.95),
rgba(37,99,235,.15),
rgba(14,165,233,.95),
rgba(255,255,255,.20)
)!important;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
pointer-events:none!important;
opacity:.75!important;
animation:ledPulse 2.2s ease-in-out infinite!important;
}

.nav button.active::before{
opacity:1!important;
background:linear-gradient(
120deg,
#67e8f9,
#0ea5e9,
#2563eb,
#ffffff
)!important;
}

.nav button.active{
box-shadow:
0 0 18px rgba(56,189,248,.75),
0 0 42px rgba(14,165,233,.55),
0 0 70px rgba(37,99,235,.32),
inset 0 0 22px rgba(255,255,255,.18)!important;
}

@keyframes ledPulse{
0%,100%{
filter:brightness(1);
opacity:.55;
}
50%{
filter:brightness(1.8);
opacity:1;
}
}

/* weekly calendar background fix */
.day{
background:linear-gradient(
180deg,
rgba(8,25,55,0.95),
rgba(15,35,75,0.92)
)!important;

border:1px solid rgba(59,130,246,.25)!important;
backdrop-filter:blur(18px)!important;
border-radius:28px!important;

box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 25px rgba(0,0,0,.35),
0 0 40px rgba(37,99,235,.12)!important;

min-height:320px!important;
}

/* calendar title */
.day h3{
color:#8ec5ff!important;
font-size:20px!important;
font-weight:700!important;
margin-bottom:18px!important;
text-align:center!important;
}

/* shift card better */
.shift{
background:linear-gradient(
135deg,
#0f2b63,
#123d8b,
#0ea5e9
)!important;

border-radius:18px!important;
box-shadow:
0 10px 25px rgba(0,0,0,.35),
0 0 18px rgba(14,165,233,.25)!important;
}

/* weekly calendar main container */
.week{
gap:22px!important;
}


/* ===== Real Professional Icons ===== */
.nav button{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
}

.navIcon{
font-size:34px!important;
line-height:1!important;
filter:drop-shadow(0 0 10px rgba(56,189,248,.55))!important;
}

.navText{
font-size:15px!important;
font-weight:800!important;
letter-spacing:.2px!important;
}

.nav button.active .navIcon{
filter:drop-shadow(0 0 18px rgba(125,211,252,.95))!important;
transform:scale(1.08)!important;
}

@media(max-width:700px){
.navIcon{font-size:42px!important}
.navText{font-size:15px!important}
}

/* force icon above text */
.nav button{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
height:110px !important;
min-width:150px !important;
padding:10px !important;
gap:10px !important;
overflow:visible !important;
}

/* icon style */
.navIcon{
display:block !important;
font-size:34px !important;
line-height:1 !important;
margin-bottom:4px !important;
filter:drop-shadow(0 0 10px rgba(56,189,248,.7)) !important;
}

/* text under icon */
.navText{
display:block !important;
font-size:14px !important;
font-weight:800 !important;
white-space:normal !important;
line-height:1.2 !important;
}

/* active button stronger glow */
.nav button.active .navIcon{
transform:scale(1.1) !important;
filter:drop-shadow(0 0 20px rgba(56,189,248,1)) !important;
}


.nav button{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
height:120px!important;
}

.navIcon{
font-size:36px!important;
line-height:1!important;
filter:drop-shadow(0 0 14px rgba(56,189,248,.9))!important;
}

.navText{
font-size:14px!important;
font-weight:900!important;
text-align:center!important;
}

.nav button.active .navIcon{
font-size:40px!important;
filter:drop-shadow(0 0 24px rgba(56,189,248,1))!important;
}