:root,html{--background:210 20% 78%!important;--foreground:220 40% 8%!important;--card:222 52% 10%!important;--card-foreground:210 30% 95%!important;--card-border:220 40% 18%!important;--primary:217 91% 55%!important;--primary-foreground:0 0% 100%!important;--sidebar:222 55% 7%!important;--sidebar-foreground:210 30% 90%!important;--border:210 15% 65%!important;--muted:210 15% 72%!important;--muted-foreground:220 20% 30%!important}
body{background:#354197!important;background-attachment:fixed!important;min-height:100vh}
[data-testid="top-nav"],header{background:linear-gradient(90deg,#0a1628 0%,#0f2044 50%,#0a1628 100%)!important;border-bottom:1px solid rgba(59,130,246,.2)!important;box-shadow:0 4px 20px rgba(0,0,0,.5)!important}
[data-testid^="nav-"]{color:rgba(180,200,225,.75)!important;border-radius:7px!important}
[data-testid^="nav-"]:hover{background:rgba(59,130,246,.12)!important;color:#fff!important}
.glass-panel{background:linear-gradient(170deg,rgba(10,22,50,.97) 0%,rgba(8,18,42,.97) 55%,rgba(30,8,8,.92) 100%)!important;border:1px solid rgba(59,130,246,.18)!important;border-radius:12px!important;color:#e2e8f0!important;box-shadow:0 6px 24px rgba(0,0,0,.3),0 0 40px rgba(180,30,20,.08)!important;position:relative!important;overflow:hidden!important}
.glass-panel::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(100,160,255,.3) 40%,rgba(100,160,255,.3) 60%,transparent);pointer-events:none}
.glass-panel::after{content:'';position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(0deg,rgba(200,25,15,.22) 0%,rgba(200,25,15,.08) 50%,transparent 100%);pointer-events:none;border-radius:0 0 12px 12px;z-index:0}
.glass-panel>*{position:relative!important;z-index:1!important}
.glass-panel.alert-accent{background:linear-gradient(170deg,rgba(10,22,50,.97) 0%,rgba(8,18,42,.95) 40%,rgba(60,10,10,.95) 100%)!important;border-color:rgba(220,38,38,.3)!important}
.kpi-tile{position:relative!important;overflow:hidden!important}
.kpi-tile::after{content:'';position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(0deg,rgba(200,25,15,.2) 0%,rgba(200,25,15,.06) 55%,transparent 100%);pointer-events:none;z-index:0}
.kpi-tile>*{position:relative!important;z-index:1!important}
.region-chip{position:relative!important;overflow:hidden!important}
.region-chip::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(0deg,rgba(185,28,28,.2) 0%,transparent 100%);pointer-events:none;z-index:0}
.section-eyebrow{color:rgba(148,170,210,.6)!important;font-size:10px!important;letter-spacing:1.5px!important;text-transform:uppercase!important;font-weight:600!important}
.section-title{color:#e2e8f0!important;font-weight:700!important}
.kpi-value,.big{color:#fff!important;font-weight:800!important}
.kpi-label{color:rgba(148,170,210,.65)!important;font-size:11px!important}
.kpi-foot{color:rgba(148,170,210,.4)!important;font-size:10px!important}
.rag-pill{font-weight:600!important;border-radius:6px!important;font-size:11px!important}
.rag-pill.rag-red{background:rgba(220,38,38,.15)!important;border:1px solid rgba(220,38,38,.35)!important;color:#fca5a5!important}
.rag-pill.rag-amber{background:rgba(217,119,6,.15)!important;border:1px solid rgba(217,119,6,.35)!important;color:#fcd34d!important}
.rag-pill.rag-green{background:rgba(22,163,74,.15)!important;border:1px solid rgba(22,163,74,.35)!important;color:#86efac!important}
.live-dot{background:#dc2626!important;box-shadow:0 0 6px rgba(220,38,38,.7)!important}
.crumb{color:rgba(148,170,210,.45)!important}.crumb.active{color:#e2e8f0!important;font-weight:600!important}
.donut-center{color:#fff!important;font-weight:800!important}
.gauge-pivot{background:#3b82f6!important;box-shadow:0 0 8px rgba(59,130,246,.7)!important}
table{border-collapse:separate!important;border-spacing:0!important}
thead tr{background:rgba(5,12,28,.9)!important}
thead th{color:rgba(148,170,210,.7)!important;border-bottom:1px solid rgba(59,130,246,.2)!important;font-size:10px!important;letter-spacing:1.2px!important;text-transform:uppercase!important;font-weight:700!important;padding:10px 14px!important}
tbody tr:nth-child(even){background:rgba(59,130,246,.03)!important}
tbody tr:hover{background:rgba(59,130,246,.08)!important}
tbody td{color:#cbd5e1!important;border-bottom:1px solid rgba(59,130,246,.07)!important;padding:9px 14px!important}
button,[role="button"]{transition:all .18s ease!important}
button:not(.pp-login-btn):not(.pp-chpass-btn){background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%)!important;border:1px solid rgba(59,130,246,.4)!important;color:#fff!important;border-radius:7px!important;font-weight:600!important;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 2px 8px rgba(37,99,235,.4)!important}
button:not(.pp-login-btn):not(.pp-chpass-btn):hover{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)!important;transform:translateY(-1px)}
input,select,textarea{background:rgba(255,255,255,.55)!important;border:1px solid rgba(180,200,220,.7)!important;border-radius:7px!important;color:#0f172a!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)!important}
input:focus,select:focus,textarea:focus{border-color:rgba(59,130,246,.5)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.06),0 0 0 3px rgba(59,130,246,.15)!important;outline:none!important;background:rgba(255,255,255,.8)!important}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(180,200,220,.3)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2563eb,#dc2626);border-radius:4px}
#pp-login-overlay{background:linear-gradient(145deg,#020610 0%,#08122a 50%,#020610 100%)!important}
.pp-login-box{background:linear-gradient(160deg,rgba(10,22,50,.75) 0%,rgba(6,12,26,.93) 100%)!important;border:1px solid rgba(59,130,246,.22)!important;border-radius:16px!important}
.pp-login-title{color:#e2e8f0!important}
.pp-login-sub{color:rgba(148,170,210,.55)!important}
.pp-login-label{color:rgba(148,170,210,.7)!important}
.pp-login-input{background:rgba(5,10,24,.6)!important;border:1px solid rgba(59,130,246,.2)!important;border-radius:8px!important;color:#f1f5f9!important}
.pp-login-btn{background:linear-gradient(135deg,#1d4ed8 0%,#1e3a8a 50%,#dc2626 100%)!important;border-radius:8px!important;font-weight:700!important}
.pp-chpass-box{background:linear-gradient(145deg,#0c1528 0%,#080d1a 100%)!important;border:1px solid rgba(59,130,246,.2)!important;border-radius:14px!important}
/* BUTTONS DARK METALLIC + NAVY BLUE */
button:not(.pp-login-btn):not(.pp-chpass-btn) {
background: linear-gradient(145deg,
#1e3a5f 0%,
#162d4e 30%,
#0f2040 55%,
#1a3358 80%,
#243d60 100%) !important;
border: 1px solid rgba(100,150,210,0.4) !important;
border-top: 1px solid rgba(120,170,230,0.5) !important;
color: #dce8f5 !important;
border-radius: 7px !important;
font-weight: 600 !important;
box-shadow:
0 1px 0 rgba(120,170,230,0.25) inset,
0 -1px 0 rgba(0,0,0,0.3) inset,
0 3px 10px rgba(0,0,0,0.35),
0 1px 3px rgba(0,0,0,0.2) !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.18s ease !important;
}
button:not(.pp-login-btn):not(.pp-chpass-btn)::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 45% !important;
background: linear-gradient(180deg,
rgba(150,190,240,0.15) 0%,
rgba(150,190,240,0.0) 100%) !important;
pointer-events: none !important;
}
button:not(.pp-login-btn):not(.pp-chpass-btn):hover {
background: linear-gradient(145deg,
#254470 0%,
#1c3560 35%,
#152850 55%,
#203e6a 100%) !important;
box-shadow:
0 1px 0 rgba(140,185,240,0.3) inset,
0 5px 14px rgba(0,0,0,0.4),
0 0 12px rgba(59,130,246,0.2) !important;
transform: translateY(-1px) !important;
color: #ffffff !important;
}
button:not(.pp-login-btn):not(.pp-chpass-btn):active {
transform: translateY(0) !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
/* GLASSMORPHISM EFFECT FULL PORTAL */
.glass-panel {
background: linear-gradient(145deg,
rgba(10,22,50,0.55) 0%,
rgba(8,18,42,0.50) 55%,
rgba(30,8,8,0.45) 100%) !important;
backdrop-filter: blur(16px) saturate(180%) !important;
-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-top: 1px solid rgba(255,255,255,0.15) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 8px 32px rgba(0,0,0,0.4),
0 2px 8px rgba(0,0,0,0.2) !important;
}
.kpi-tile {
background: linear-gradient(145deg,
rgba(10,22,50,0.5) 0%,
rgba(8,18,42,0.45) 55%,
rgba(30,8,8,0.4) 100%) !important;
backdrop-filter: blur(12px) saturate(160%) !important;
-webkit-backdrop-filter: blur(12px) saturate(160%) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-top: 1px solid rgba(255,255,255,0.12) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.07) inset,
0 6px 20px rgba(0,0,0,0.35) !important;
}
.region-chip {
background: linear-gradient(145deg,
rgba(15,30,65,0.55) 0%,
rgba(10,22,50,0.50) 100%) !important;
backdrop-filter: blur(10px) saturate(150%) !important;
-webkit-backdrop-filter: blur(10px) saturate(150%) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-top: 1px solid rgba(255,255,255,0.14) !important;
}
[data-testid="top-nav"] {
background: rgba(5,12,28,0.7) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.alert-row {
background: linear-gradient(145deg,
rgba(10,22,50,0.5) 0%,
rgba(8,18,42,0.45) 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
}
.crumb {
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
background: rgba(10,22,50,0.4) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
/* BACKGROUND COLOR UPDATE */
body{background:#354197!important;background-attachment:fixed!important;min-height:100vh}
/* FORCE BACKGROUND */
/* BACKGROUND SAME AS BUTTONS */
html, body, #root, #root > div {
background: linear-gradient(145deg, #1e3a5f 0%, #162d4e 30%, #0f2040 55%, #1a3358 80%, #243d60 100%) !important;
}
/* FULL PORTAL NAVY METALLIC THEME + MIRROR ANIMATION */
/* Body */
html, body, #root, #root > div {
background: linear-gradient(145deg, #1e3a5f 0%, #162d4e 30%, #0f2040 55%, #1a3358 80%, #243d60 100%) !important;
min-height: 100vh !important;
}
/* Mirror shimmer animation */
@keyframes mirrorShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Glass panels navy metallic */
.glass-panel {
background: linear-gradient(145deg,
#1e3a5f 0%, #162d4e 35%, #0f2040 60%, #1a3358 100%) !important;
border: 1px solid rgba(120,170,230,0.25) !important;
border-top: 1px solid rgba(150,200,255,0.35) !important;
box-shadow:
0 1px 0 rgba(150,200,255,0.15) inset,
0 -1px 0 rgba(180,25,15,0.15) inset,
0 8px 32px rgba(0,0,0,0.4),
0 2px 8px rgba(0,0,0,0.25) !important;
position: relative !important;
overflow: hidden !important;
}
/* Mirror shimmer on panels */
.glass-panel::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
background: linear-gradient(105deg,
transparent 40%,
rgba(150,200,255,0.06) 50%,
rgba(200,230,255,0.1) 52%,
rgba(150,200,255,0.06) 54%,
transparent 60%) !important;
background-size: 200% 100% !important;
animation: mirrorShimmer 4s linear infinite !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* KPI tiles */
.kpi-tile {
background: linear-gradient(145deg,
#1e3a5f 0%, #162d4e 35%, #0f2040 60%, #1a3358 100%) !important;
border: 1px solid rgba(120,170,230,0.2) !important;
border-top: 1px solid rgba(150,200,255,0.3) !important;
box-shadow:
0 1px 0 rgba(150,200,255,0.12) inset,
0 -1px 0 rgba(180,25,15,0.12) inset,
0 6px 20px rgba(0,0,0,0.35) !important;
position: relative !important;
overflow: hidden !important;
}
.kpi-tile::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
background: linear-gradient(105deg,
transparent 40%,
rgba(150,200,255,0.05) 50%,
rgba(200,230,255,0.08) 52%,
rgba(150,200,255,0.05) 54%,
transparent 60%) !important;
background-size: 200% 100% !important;
animation: mirrorShimmer 5s linear infinite !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Region chips */
.region-chip {
background: linear-gradient(145deg,
#1e3a5f 0%, #162d4e 40%, #0f2040 100%) !important;
border: 1px solid rgba(120,170,230,0.2) !important;
border-top: 1px solid rgba(150,200,255,0.28) !important;
position: relative !important;
overflow: hidden !important;
}
.region-chip::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
background: linear-gradient(105deg,
transparent 40%,
rgba(150,200,255,0.06) 50%,
rgba(200,230,255,0.09) 52%,
transparent 60%) !important;
background-size: 200% 100% !important;
animation: mirrorShimmer 6s linear infinite !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Alert rows */
.alert-row {
background: linear-gradient(145deg,
#1e3a5f 0%, #162d4e 40%, #0f2040 100%) !important;
border: 1px solid rgba(120,170,230,0.18) !important;
}
/* Top nav */
[data-testid="top-nav"] {
background: linear-gradient(90deg,
#0a1628 0%, #0f2044 50%, #0a1628 100%) !important;
border-bottom: 1px solid rgba(120,170,230,0.2) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
/* Text colors */
.kpi-value, .big, .section-title { color: #ffffff !important; }
.kpi-label, .section-eyebrow { color: rgba(150,195,240,0.7) !important; }
.kpi-foot { color: rgba(150,195,240,0.45) !important; }
tbody td { color: #c8dff5 !important; }
thead th { color: rgba(150,195,240,0.75) !important; }
/* GREEN CARDS GREEN + NAVY METALLIC */
.kpi-tile.kpi-good {
background: linear-gradient(145deg,
#0f3d2a 0%, #0a2d1e 35%, #062015 60%, #0d3525 100%) !important;
border: 1px solid rgba(34,197,94,0.3) !important;
border-top: 1px solid rgba(74,222,128,0.4) !important;
box-shadow:
0 1px 0 rgba(74,222,128,0.15) inset,
0 -1px 0 rgba(0,0,0,0.3) inset,
0 6px 20px rgba(0,0,0,0.35),
0 0 20px rgba(34,197,94,0.08) !important;
}
.kpi-tile.kpi-good .kpi-value { color: #ffffff !important; }
.kpi-tile.kpi-good .kpi-label { color: rgba(74,222,128,0.7) !important; }
.kpi-tile.kpi-good .kpi-foot { color: rgba(74,222,128,0.45) !important; }
/* Shimmer on green cards */
.kpi-tile.kpi-good::before {
background: linear-gradient(105deg,
transparent 40%,
rgba(74,222,128,0.05) 50%,
rgba(134,239,172,0.09) 52%,
rgba(74,222,128,0.05) 54%,
transparent 60%) !important;
background-size: 200% 100% !important;
animation: mirrorShimmer 5s linear infinite !important;
}
/* EXECUTIVE ALERTS PANEL RED + NAVY METALLIC */
.glass-panel.alert-accent {
background: linear-gradient(145deg,
#3d0f1e 0%, #2d0a14 35%, #200610 60%, #350d18 100%) !important;
border: 1px solid rgba(220,38,38,0.3) !important;
border-top: 1px solid rgba(248,113,113,0.4) !important;
box-shadow:
0 1px 0 rgba(248,113,113,0.15) inset,
0 -1px 0 rgba(0,0,0,0.3) inset,
0 8px 32px rgba(0,0,0,0.4),
0 0 30px rgba(220,38,38,0.12) !important;
}
/* Shimmer on red alert panel */
.glass-panel.alert-accent::before {
background: linear-gradient(105deg,
transparent 40%,
rgba(248,113,113,0.05) 50%,
rgba(252,165,165,0.09) 52%,
rgba(248,113,113,0.05) 54%,
transparent 60%) !important;
background-size: 200% 100% !important;
animation: mirrorShimmer 4s linear infinite !important;
}
/* RESPONSIVE & ALIGNMENT FIXES */
/* Main layout container */
#root > div {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
/* Top nav spacing */
[data-testid="top-nav"] {
padding: 0.6rem 1.5rem !important;
gap: 0.5rem !important;
}
/* Main content area */
#root > div > div:not([data-testid="top-nav"]) {
padding: 1rem 1.5rem !important;
}
/* Cards grid even spacing */
.glass-panel {
margin-bottom: 0 !important;
}
/* KPI tiles grid */
div[style*="grid-template-columns"] {
gap: 0.85rem !important;
}
/* Left sidebar width fix */
aside, [class*="sidebar"] {
min-width: 220px !important;
max-width: 260px !important;
}
/* Region chips */
.region-chip {
padding: 0.6rem 0.8rem !important;
margin-bottom: 0.35rem !important;
width: 100% !important;
}
/* Table responsive */
div[style*="overflow"] {
overflow-x: auto !important;
}
table {
min-width: 600px !important;
width: 100% !important;
}
/* MOBILE */
@media (max-width: 768px) {
[data-testid="top-nav"] {
padding: 0.5rem 0.75rem !important;
flex-wrap: wrap !important;
}
#root > div > div:not([data-testid="top-nav"]) {
padding: 0.75rem !important;
}
.glass-panel {
border-radius: 10px !important;
}
.kpi-tile {
padding: 0.75rem !important;
}
.kpi-value {
font-size: 1.4rem !important;
}
div[style*="grid-template-columns"] {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
/* TABLET */
@media (max-width: 1024px) {
aside, [class*="sidebar"] {
min-width: 180px !important;
max-width: 200px !important;
}
div[style*="grid-template-columns"] {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
}
/* VIEWPORT SCALE FIX */
@media (max-width: 1400px) {
#root {
transform: scale(0.85) !important;
transform-origin: top left !important;
width: 117.6% !important;
}
}
/* DONUT CHART CARDS 40% SMALLER */
.donut-3d {
width: 60% !important;
margin: 0 auto !important;
}
/* REMOVE EXTRA BOTTOM SPACE */
#root, #root > div {
height: auto !important;
min-height: 100vh !important;
overflow-x: hidden !important;
}
body {
height: auto !important;
overflow-y: auto !important;
}