/* Main dashboard: header, filters, KPIs, charts, table, SharePoint hints */
.dash-header{
max-width:min(1600px,96vw);
margin:0 auto;
padding:24px 20px 12px;
padding-left:max(20px,env(safe-area-inset-left));
padding-right:max(20px,env(safe-area-inset-right));
text-align:center;
position:relative;
z-index:1;
}

.dash-back-btn{
position:absolute;
left:max(12px,env(safe-area-inset-left));
top:50%;
transform:translateY(-50%);
appearance:none;
border:1px solid var(--card-border);
background:var(--card-elevated);
backdrop-filter:blur(10px);
color:var(--text-secondary);
padding:10px 18px;
border-radius:999px;
font-family:var(--font-sans);
font-size:12px;
font-weight:600;
letter-spacing:.04em;
cursor:pointer;
transition:transform var(--dur-fast) var(--ease-out-expo),box-shadow var(--dur-med) ease,background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
z-index:2;
white-space:nowrap;
max-width:min(46vw,240px);
overflow:hidden;
text-overflow:ellipsis;
}

.dash-back-btn:hover{
transform:translateY(calc(-50% - 2px));
box-shadow:var(--shadow-sm),0 0 0 1px rgba(200,190,120,0.14);
border-color:var(--card-border-strong);
color:var(--accent-bright);
}

@media(max-width:720px){
.dash-header{padding-top:56px}
.dash-back-btn{
left:50%;
top:14px;
transform:translateX(-50%);
max-width:min(92vw,320px);
}
.dash-back-btn:hover{
transform:translateX(-50%) translateY(-2px);
}
}

.dash-title{
margin:0 0 8px;
font-family:var(--font-display);
font-size:clamp(1.2rem,2.5vw,1.75rem);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
background:linear-gradient(95deg,#fdf9f3 0%,#d8e4c8 38%,#9ec9a0 55%,#eef3e6 85%);
background-size:220% auto;
animation:shimmer 12s ease-in-out infinite alternate;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.dash-sub{
margin:0;
font-family:var(--font-sans);
font-size:13px;
font-weight:500;
letter-spacing:.02em;
color:var(--text-secondary);
opacity:0.92;
}

.app-main{
position:relative;
isolation:isolate;
}

/* Very soft spotlight behind charts — not the welcome nebula */
.app-main::before{
content:'';
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
opacity:0.85;
background:
	radial-gradient(ellipse 55% 42% at 38% 42%,rgba(165,200,155,0.08),transparent 58%),
	radial-gradient(ellipse 40% 35% at 88% 28%,rgba(205,195,125,0.055),transparent 55%);
}

.dash-wrap{
position:relative;
z-index:1;
max-width:min(1600px,96vw);
margin:0 auto;
padding:16px 20px 56px;
box-sizing:border-box;
}

.card-glass{
background:var(--card);
backdrop-filter:blur(16px) saturate(1.15);
-webkit-backdrop-filter:blur(16px) saturate(1.15);
border:1px solid var(--card-border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-glow);
transition:box-shadow var(--dur-med) ease,border-color var(--dur-fast) ease;
}

.card-glass:hover{
border-color:rgba(200,190,120,0.22);
}

.filter-bar{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:14px 16px;
padding:18px 20px;
margin-bottom:18px;
}

.filter-bar[hidden]{display:none!important}

.filter-field{
display:flex;
flex-direction:column;
gap:4px;
min-width:140px;
flex:1 1 140px;
}

.filter-field label{
font-family:var(--font-sans);
font-size:10px;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:600;
color:var(--text-muted);
}

.filter-field select{
appearance:none;
border-radius:10px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(26,36,26,0.85);
color:#f8fafc;
padding:10px 32px 10px 12px;
font-size:13px;
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8c4a8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
transition:border-color .2s,box-shadow .2s;
}

.filter-field select:hover,.filter-field select:focus{
outline:none;
border-color:rgba(205,195,130,0.38);
box-shadow:0 0 0 3px var(--accent-soft);
}

.btn-reset{
margin-left:auto;
align-self:flex-end;
border-radius:10px;
border:1px solid rgba(255,255,255,0.14);
background:rgba(26,36,26,0.6);
color:#e2e8f0;
padding:10px 16px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:background .2s,color .2s;
}

.btn-reset:hover{background:rgba(196,212,160,0.14);color:var(--accent)}

.kpi-strip{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:14px;
margin-bottom:20px;
}

@media(max-width:1100px){
.kpi-strip{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:620px){
.kpi-strip{grid-template-columns:repeat(2,1fr)}
}

.kpi-card{
position:relative;
overflow:hidden;
border-radius:var(--radius-md);
padding:18px 14px;
text-align:center;
cursor:pointer;
font-family:var(--font-sans);
background:linear-gradient(152deg,rgba(18,32,24,0.96),rgba(28,44,34,0.9));
border:1px solid rgba(255,255,255,0.08);
box-shadow:var(--shadow-sm);
transition:transform var(--dur-med) var(--ease-out-expo),box-shadow var(--dur-med) ease,border-color var(--dur-fast) ease;
}

.kpi-card::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(380px 100px at 50% -25%,rgba(168,205,155,0.15),transparent 72%);
pointer-events:none;
opacity:0;
transition:opacity var(--dur-med) ease;
}

.kpi-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow),0 0 0 1px rgba(200,190,120,0.12);
border-color:rgba(200,190,120,0.24);
}

.kpi-card:hover::after{opacity:1}

.kpi-card--active{
border-color:rgba(165,200,155,0.55);
box-shadow:0 0 0 1px rgba(205,195,130,0.28),0 18px 44px rgba(0,0,0,0.38);
}

.kpi-card .lbl{
font-size:10px;
text-transform:uppercase;
letter-spacing:.14em;
font-weight:600;
color:var(--text-muted);
margin-bottom:8px;
}

.kpi-card .val{
font-size:clamp(1.45rem,3.1vw,2.05rem);
font-weight:800;
color:var(--accent-bright);
line-height:1.08;
font-variant-numeric:tabular-nums;
letter-spacing:-0.02em;
}

.kpi-card[data-filter="migration"] .val{font-size:clamp(1.25rem,2.8vw,1.75rem)}

.mid-grid{
display:grid;
grid-template-columns:minmax(0,1.82fr) minmax(0,0.92fr);
gap:22px;
margin-bottom:22px;
align-items:stretch;
}

/* Month chart = primary: wider column + taller plot */
.mid-grid__primary .panel-inner{padding-bottom:14px}
.mid-grid__primary .panel-title{
font-size:15px;
letter-spacing:.08em;
color:rgba(248,252,250,0.98);
position:relative;
padding-bottom:10px;
margin-bottom:2px;
}
.mid-grid__primary .panel-title::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:min(200px,38%);
height:2px;
border-radius:2px;
background:linear-gradient(90deg,rgba(205,195,130,0.7),rgba(165,200,155,0.28),transparent);
}
.mid-grid__primary{
position:relative;
box-shadow:var(--shadow-glow),0 0 56px rgba(200,190,120,0.08),inset 0 1px 0 rgba(255,255,255,0.06);
border-color:rgba(200,190,120,0.28);
}
.mid-grid__primary::before{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:linear-gradient(165deg,rgba(205,195,130,0.05) 0%,transparent 42%);
}

.mid-grid__primary .echart-box{
height:min(520px,56vh);
min-height:340px;
}

.panel-hint{
margin:0 0 12px;
font-size:11px;
line-height:1.5;
letter-spacing:.02em;
color:var(--text-muted);
max-width:56em;
}
.mid-grid__primary-hint{
color:rgba(148,200,175,0.88);
}
.panel-hint--compact{
font-size:10px;
margin-bottom:10px;
opacity:0.9;
}

/* Map = secondary: quieter frame — flex so map fills card (grid stretch was leaving empty band) */
.mid-grid__secondary{
display:flex;
flex-direction:column;
min-height:0;
background:rgba(20,30,24,0.55);
border-color:rgba(255,255,255,0.07);
box-shadow:var(--shadow-sm);
}
.mid-grid__secondary:hover{
border-color:rgba(200,190,120,0.16);
}
.mid-grid__secondary .panel-inner{
flex:1;
display:flex;
flex-direction:column;
min-height:0;
}
.mid-grid__secondary .panel-title{
font-size:12px;
opacity:0.94;
margin:0 0 4px;
flex-shrink:0;
}
.mid-grid__secondary .panel-hint{
flex-shrink:0;
}
.mid-grid__secondary .echart-map{
flex:1 1 auto;
width:100%;
min-height:220px;
height:auto!important;
}

@media(max-width:980px){
.mid-grid{grid-template-columns:1fr;gap:18px}
.mid-grid__primary .echart-box{
height:min(440px,52vh);
min-height:300px;
}
.mid-grid__secondary .echart-map{
min-height:min(340px,42vh);
}
}

.panel-inner{padding:16px 18px 12px}

.panel-title{
margin:0 0 10px;
font-family:var(--font-sans);
font-size:13px;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--text-secondary);
}

.echart-box{
width:100%;
height:min(380px,42vh);
min-height:280px;
background:transparent;
}

#monthChart{cursor:pointer}

.echart-map{
height:min(420px,48vh);
min-height:300px;
}

.table-section{padding:0;overflow:hidden}

.table-head{
padding:14px 16px 0;
}

.table-scroll{
overflow:auto;
max-height:min(420px,50vh);
border-top:1px solid rgba(255,255,255,0.06);
}

.table-scroll table{
width:100%;
border-collapse:collapse;
font-family:var(--font-sans);
font-size:13px;
}

.table-scroll thead th{
position:sticky;
top:0;
z-index:1;
background:linear-gradient(180deg,rgba(20,32,24,0.98),rgba(24,38,28,0.96));
color:rgba(167,243,228,0.95);
text-align:left;
padding:12px 14px;
border-bottom:1px solid rgba(200,190,120,0.2);
font-weight:600;
letter-spacing:.04em;
white-space:nowrap;
}

.table-scroll tbody td{
padding:11px 14px;
border-bottom:1px solid rgba(255,255,255,0.06);
color:var(--text-primary);
vertical-align:top;
}

.table-scroll tbody tr{
animation:fadeUp .4s ease both;
}

.table-scroll tbody tr:nth-child(even){background:rgba(0,0,0,0.08)}

.table-scroll tbody tr:hover{background:rgba(196,212,160,0.08)}

.shp-iframe-tip{ background:#243524; color:#a8c4a8; text-align:center; padding:10px 16px; font-size:14px; }
.shp-iframe-tip a{ color:var(--accent-bright); margin-left:6px; }
.shp-iframe-overlay{ position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(45,62,45,0.92); z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:20px; }
.shp-iframe-overlay h2{ color:#fff; margin:0 0 12px; font-size:22px; }
.shp-iframe-overlay p{ color:#7eb8c4; margin:0 0 24px; font-size:16px; max-width:420px; text-align:center; }
.shp-iframe-overlay a{ display:inline-block; background:var(--accent-bright); color:#1e1c14; padding:14px 28px; text-decoration:none; border-radius:6px; font-size:16px; font-weight:bold; }
.shp-iframe-overlay a:hover{ background:#5ef0ff; }

.app-main--enter{
animation:appMainEnter .75s var(--ease-out-expo) both;
}
@keyframes appMainEnter{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}