<?php require BASE_PATH.'/app/views/layouts/header.php'; ?>

<style>

body{
font-family:Cairo!important;
background:
linear-gradient(
180deg,
#f3f7fd,
#eef3fb
)!important;
}

.wrap{
max-width:1700px;
margin:auto;
padding:26px;
}

.hero{

background:
linear-gradient(
135deg,
#081226,
#123dca 65%,
#275cf6
);

border-radius:34px;

padding:42px;

color:#fff;

position:relative;

overflow:hidden;

box-shadow:
0 35px 80px rgba(20,55,180,.18);

}

.hero:after{

content:'';

position:absolute;

right:-160px;
top:-100px;

width:450px;
height:450px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.18),
transparent
);

}

.title{

font-size:54px;
font-weight:900;

}

.sub{

opacity:.92;

font-size:19px;

}

.metrics{

display:grid;

grid-template-columns:
repeat(
4,
1fr
);

gap:22px;

margin-top:24px;

}

.cardx{

background:#fff;

border-radius:28px;

padding:34px;

box-shadow:
0 18px 45px rgba(0,0,0,.06);

}

.num{

font-size:54px;

font-weight:900;

color:#0f172a;

}

.label{

color:#64748b;

font-weight:700;

}

.grid{

display:grid;

grid-template-columns:
1.7fr 1fr;

gap:22px;

margin-top:22px;

}

.pipe{

display:flex;

gap:16px;

margin-top:26px;

flex-wrap:wrap;

}

.stage{

flex:1;

padding:22px;

border-radius:20px;

color:#fff;

font-weight:700;

text-align:center;

}

.s1{background:#2563eb}
.s2{background:#06b6d4}
.s3{background:#f59e0b}
.s4{background:#9333ea}
.s5{background:#16a34a}

.quick{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}

.quick a{

padding:18px;

text-decoration:none;

background:
linear-gradient(
90deg,
#eff6ff,
#fff
);

border-radius:18px;

color:#123;

font-weight:700;

}

.quick a:hover{

transform:
translateY(-2px);

}

.health{

margin-top:18px;

}

.health div{

margin-bottom:18px;

}

.bar{

height:12px;

border-radius:30px;

background:#e5e7eb;

overflow:hidden;

}

.fill{

height:100%;

background:
linear-gradient(
90deg,
#1d4ed8,
#4f46e5
);

}

@media(max-width:1200px){

.metrics{
grid-template-columns:1fr 1fr;
}

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

}



/* PACK137 */

.dashboard{

display:grid;

grid-template-columns:
repeat(12,1fr);

gap:20px;

}

.statusStrip,
.hero,
.cards,
.content,
.analytics,
.bottom,
.footer-mini{

grid-column:
1/-1;

}

.hero{

min-height:150px!important;

padding:26px 36px!important;

}

.hero h1{

font-size:42px!important;

}

.hero p{

font-size:17px!important;

}

.cards{

display:grid!important;

grid-template-columns:
repeat(4,1fr);

gap:16px;

}

.kpi{

min-height:130px!important;

padding:18px!important;

}

.n{

font-size:38px!important;

}

.t{

font-size:14px!important;

}

.content{

display:grid!important;

grid-template-columns:
8fr
4fr;

gap:18px;

}

.panel{

padding:18px!important;

}

.pipeline{

grid-template-columns:
repeat(5,1fr)!important;

}

.stage{

min-height:66px!important;

font-size:14px!important;

}

.analytics{

display:grid;

grid-template-columns:
7fr
5fr;

gap:18px;

}

.chartCard{

min-height:360px;

background:
linear-gradient(
135deg,
#071126,
#0f2b7a
)!important;

}

.bars{

height:150px!important;

}

.quick{

display:grid!important;

grid-template-columns:
repeat(2,1fr);

gap:12px;

}

.quick a{

min-height:90px!important;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

gap:8px;

}

.quick a::before{

font-size:30px!important;

}

.timeline{

min-height:360px;

}

.timeline .item{

padding:14px 0!important;

}

.healthCard{

min-height:360px!important;

}

.footer-mini{

font-size:13px;

opacity:.65;

}

@media(max-width:1200px){

.cards{
grid-template-columns:1fr 1fr;
}

.content,
.analytics{
grid-template-columns:1fr;
}

}



<style>

<?php
if (
    !empty($assignedTracks)
    &&
    (
        ($_SESSION['conference_role'] ?? '') === 'track_chair'
        ||
        ($_SESSION['role'] ?? '') === 'track_chair'
    )
):
?>
<div class="card shadow-sm mb-4 border-primary">
    <div class="card-header bg-primary text-white">
        <i class="fa fa-sitemap"></i>
        My Assigned Tracks
    </div>

    <div class="card-body">

        <?php foreach($assignedTracks as $track): ?>

            <span
                class="badge bg-success me-2 mb-2"
                style="font-size:14px;padding:10px;"
            >
                #<?= (int)$track['id'] ?>
                -
                <?= htmlspecialchars($track['track_name']) ?>
            </span>

        <?php endforeach; ?>

    </div>
</div>
<?php endif; ?>

<div class="exec-zone">

<div class="exec-card">

<div class="exec-title">

📊 Submission Funnel

</div>

<div class="exec-bars">

<div class="exec-row">
<div>Submitted</div>
<div class="exec-track">
<div class="exec-fill"
style="width:100%;background:#2455ff">
</div>
</div>
<strong>14</strong>
</div>

<div class="exec-row">
<div>Review</div>
<div class="exec-track">
<div class="exec-fill"
style="width:72%;background:#06b6d4">
</div>
</div>
<strong>9</strong>
</div>

<div class="exec-row">
<div>Revision</div>
<div class="exec-track">
<div class="exec-fill"
style="width:35%;background:#f59e0b">
</div>
</div>
<strong>3</strong>
</div>

<div class="exec-row">
<div>Decision</div>
<div class="exec-track">
<div class="exec-fill"
style="width:20%;background:#7c3aed">
</div>
</div>
<strong>2</strong>
</div>

</div>

</div>

<div class="exec-card">

<div class="exec-title">

⚡ Recent Activity

</div>

<div class="exec-feed">

<div class="exec-item">

<i>✓</i>

<div>

Reviewer Assigned

</div>

</div>

<div class="exec-item">

<i>★</i>

<div>

Decision Approved

</div>

</div>

<div class="exec-item">

<i>↻</i>

<div>

Author Revision

</div>

</div>

</div>

</div>

</div>



/* PACK138 */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap");

body{
font-family:Cairo!important;
}

.metricIcon{
width:68px;
height:68px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:#fff;
box-shadow:0 18px 40px rgba(37,99,235,.18);
}

.delta{
display:inline-flex;
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
background:#e9fff2;
color:#059669;
margin-top:10px;
}

.analyticsRow{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:20px;
margin-top:22px;
}

.graphCard{
background:#fff;
border-radius:28px;
padding:26px;
box-shadow:0 20px 50px rgba(15,23,42,.08);
}

.graphTitle{
font-size:22px;
font-weight:900;
margin-bottom:26px;
color:#0f172a;
}

.funnel{
display:grid;
gap:14px;
}

.step{
height:62px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 26px;
color:#fff;
font-weight:800;
}

.s1{background:#2563eb}
.s2{background:#06b6d4}
.s3{background:#f59e0b}
.s4{background:#7c3aed}
.s5{background:#16a34a}

.donut{
width:260px;
height:260px;
margin:auto;
border-radius:50%;
background:
conic-gradient(
#2563eb 0 72%,
#e5e7eb 72%
);
display:flex;
align-items:center;
justify-content:center;
}

.donutInner{
width:190px;
height:190px;
border-radius:50%;
background:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:54px;
font-weight:900;
}

.timeline{
margin-top:20px;
}

.ev{
padding:14px 0;
border-bottom:1px solid #edf2f7;
display:flex;
gap:14px;
}

.ev i{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#eef4ff;
border-radius:12px;
color:#2455ff;
}

@media(max-width:1200px){

.analyticsRow{
grid-template-columns:1fr;
}

}



<style>

/* PACK139 */

.ops-grid{

display:grid;

grid-template-columns:
1.3fr 1fr 1fr;

gap:18px;

margin-top:24px;

}

.ops{

background:#fff;

border-radius:30px;

padding:26px;

box-shadow:
0 24px 60px rgba(15,23,42,.08);

}

.opsTitle{

font-size:22px;

font-weight:900;

margin-bottom:24px;

color:#081126;

}

.capacity{

display:grid;

gap:16px;

}

.cap{

display:grid;

grid-template-columns:
170px 1fr 70px;

align-items:center;

gap:14px;

}

.capBar{

height:14px;

border-radius:999px;

overflow:hidden;

background:#edf2f7;

}

.capFill{

height:100%;

border-radius:999px;

}

.feed{

display:grid;

gap:14px;

}

.feedRow{

display:flex;

gap:14px;

padding:14px;

border-radius:18px;

background:#f8fbff;

}

.feedIcon{

width:48px;

height:48px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:18px;

}

.spark{

display:flex;

align-items:flex-end;

height:220px;

gap:10px;

}

.spark div{

flex:1;

border-radius:18px 18px 0 0;

background:
linear-gradient(
180deg,
#2455ff,
#4c6fff
);

}

.darkOps{

background:
linear-gradient(
135deg,
#071126,
#1536c4
);

color:#fff;

}

.darkOps *{

color:#fff;

}

.healthGrid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:16px;

}

.mini{

padding:18px;

border-radius:20px;

background:
rgba(255,255,255,.08);

}

@media(max-width:1300px){

.ops-grid{

grid-template-columns:1fr;

}

}



<style>

/* EXEC_ANALYTICS_REAL */

.exec-zone{
margin-top:30px;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:22px;
}

.exec-card{
background:#fff;
border-radius:28px;
padding:26px;
box-shadow:0 22px 60px rgba(15,23,42,.08);
}

.exec-title{
font-size:24px;
font-weight:900;
margin-bottom:24px;
}

.exec-bars{
display:grid;
gap:14px;
}

.exec-row{
display:grid;
grid-template-columns:170px 1fr 70px;
gap:12px;
align-items:center;
}

.exec-track{
height:16px;
background:#eef2f7;
border-radius:999px;
overflow:hidden;
}

.exec-fill{
height:100%;
border-radius:999px;
}

.exec-feed{
display:grid;
gap:14px;
}

.exec-item{
display:flex;
gap:14px;
padding:14px;
border-radius:18px;
background:#f8fbff;
}

.exec-item i{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
background:#2455ff;
color:#fff;
border-radius:14px;
}

@media(max-width:1200px){

.exec-zone{
grid-template-columns:1fr;
}

}



<style>

/* PACK146_THEME */

body{

background:
linear-gradient(
180deg,
#eef4fb 0%,
#f8fbff 45%,
#ffffff 100%
)!important;

color:#071126!important;

}

body,
.card,
.dashboard,
.container,
.container-fluid{

font-family:
Cairo,
Arial!important;

}

.hero{

background:
linear-gradient(
135deg,
#081226,
#123cc8 60%,
#4f7cff
)!important;

color:#fff!important;

border-radius:36px!important;

box-shadow:
0 40px 90px rgba(18,60,200,.22)!important;

}

.hero *{

color:#fff!important;

}

.hero .sub,
.hero .small{

opacity:.92!important;

}

.card{

background:#ffffff!important;

border:none!important;

border-radius:26px!important;

box-shadow:
0 18px 60px rgba(15,23,42,.07)!important;

}

.card:hover{

transform:
translateY(-4px);

transition:.25s;

}

.card-title,
h1,
h2,
h3,
h4{

color:#071126!important;

font-weight:900!important;

}

.text-muted{

color:#64748b!important;

}

.metric,
.metric-card,
.stat-card{

background:
linear-gradient(
180deg,
#ffffff,
#fbfcff
)!important;

}

.metric h2,
.metric .value{

font-size:56px!important;

font-weight:900!important;

color:#071126!important;

}

.badge{

border-radius:999px!important;

font-weight:800!important;

}

.btn{

border-radius:16px!important;

font-weight:800!important;

}

.btn-primary{

background:
linear-gradient(
135deg,
#2455ff,
#4f7cff
)!important;

border:none!important;

}

.btn-outline-primary{

border-color:#2455ff!important;

color:#2455ff!important;

}

.workflow-stage{

border-radius:20px!important;

color:#fff!important;

font-weight:900!important;

}

.workflow-stage:nth-child(1){

background:#2563eb!important;

}

.workflow-stage:nth-child(2){

background:#06b6d4!important;

}

.workflow-stage:nth-child(3){

background:#f59e0b!important;

}

.workflow-stage:nth-child(4){

background:#7c3aed!important;

}

.workflow-stage:nth-child(5){

background:#16a34a!important;

}

.progress{

height:16px!important;

background:#e9eef8!important;

border-radius:999px!important;

}

.progress-bar{

background:
linear-gradient(
90deg,
#2455ff,
#6d7cff
)!important;

}

.fa,
.fas,
.fa-solid{

color:inherit!important;

}



/* PACK136 */

body{

background:
linear-gradient(
180deg,
#eef3fb,
#f8fbff
)!important;

}

.dashboard{

position:relative;

background:
rgba(255,255,255,.22);

backdrop-filter:
blur(20px);

border-radius:42px;

padding:24px!important;

box-shadow:
0 40px 100px rgba(15,23,42,.08);

}

.dashboard::before{

content:'';

position:absolute;

left:-120px;

top:-120px;

width:320px;

height:320px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(37,99,235,.12),
transparent
);

pointer-events:none;

}

.hero{

box-shadow:
0 50px 100px rgba(0,0,0,.12)
!important;

}

.hero h1{

letter-spacing:-1px;

}

.cards{

margin-top:-42px!important;

}

.kpi{

position:relative;

overflow:hidden;

}

.kpi::before{

content:'';

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:
linear-gradient(
90deg,
#2455ff,
#4c6fff
);

}

.kpi:hover{

transform:
translateY(-6px);

}

.panel{

position:relative;

}

.panel h2{

display:flex;

align-items:center;

gap:10px;

}

.panel h2::before{

content:'';

width:10px;

height:30px;

border-radius:30px;

background:
linear-gradient(
180deg,
#2455ff,
#4c6fff
);

}

.chartCard{

border:
1px solid rgba(255,255,255,.08);

}

.stage{

box-shadow:
inset
0
-4px
0
rgba(255,255,255,.16);

}

.quick a{

box-shadow:
0 10px 25px rgba(37,99,235,.08);

}

.quick a:hover{

transform:
translateY(-3px);

}

.statusStrip{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-bottom:18px;

}

.status{

padding:12px 18px;

border-radius:40px;

background:
rgba(255,255,255,.8);

box-shadow:
0 8px 24px rgba(0,0,0,.04);

font-weight:800;

}

.footer-mini{

border-top:
1px solid rgba(0,0,0,.06);

padding-top:22px!important;

}



<style>

/* PACK150_EXEC */

.execRibbon{

margin-top:22px;

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;

}

.ribbon{

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

padding:22px;

border-radius:26px;

box-shadow:
0 22px 70px rgba(15,23,42,.12);

}

.ribbon *{

color:#fff;

}

.ribbon h2{

font-size:40px;

margin:0;

}

.ribbon small{

opacity:.9;

font-weight:700;

}

.statusStrip{

margin-top:20px;

display:flex;

gap:12px;

flex-wrap:wrap;

}

.chip{

padding:10px 18px;

border-radius:999px;

font-weight:900;

background:#fff;

color:#071126;

box-shadow:
0 8px 20px rgba(15,23,42,.06);

}

.ok{

background:#ecfdf5;

color:#059669;

}

.warn{

background:#fff8e7;

color:#d97706;

}

.info{

background:#eef4ff;

color:#2455ff;

}



<style>

/* PACK152 */

.execRibbon{

display:grid!important;

grid-template-columns:
repeat(4,minmax(280px,1fr))!important;

gap:20px!important;

margin-top:26px!important;

margin-bottom:28px!important;

align-items:stretch!important;

}

@media(max-width:1200px){

.execRibbon{

grid-template-columns:
1fr 1fr!important;

}

}

@media(max-width:700px){

.execRibbon{

grid-template-columns:
1fr!important;

}

}

.ribbon{

position:relative;

overflow:hidden;

min-height:170px!important;

border-radius:34px!important;

padding:28px!important;

display:flex!important;

justify-content:space-between!important;

align-items:flex-start!important;

background:
linear-gradient(
135deg,
#061632,
#173ec8 65%,
#4e74ff
)!important;

box-shadow:
0 30px 80px rgba(16,45,150,.22)!important;

}

.ribbon::after{

content:'';

position:absolute;

right:-50px;

top:-40px;

width:180px;

height:180px;

border-radius:50%;

background:
rgba(255,255,255,.06);

}

.ribbon h2{

font-size:64px!important;

margin:0!important;

color:#fff!important;

font-weight:900!important;

}

.ribbon small{

display:block;

font-size:15px!important;

opacity:.95;

color:#dbeafe!important;

font-weight:800!important;

}

.ribbon .kpiIcon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:
rgba(255,255,255,.12);

backdrop-filter:blur(8px);

font-size:30px;

color:#fff;

}

.ribbon .kpiValue{

margin-top:auto;

}



<style>

/* PACK153 */

.dashboard{

max-width:1900px!important;

padding:14px 18px!important;

}

.hero{

min-height:120px!important;

padding:24px 34px!important;

border-radius:28px!important;

margin-bottom:18px!important;

}

.hero h1,
.hero h2{

font-size:52px!important;

margin-bottom:4px!important;

}

.hero p{

margin:0!important;

font-size:15px!important;

}

.execRibbon{

display:grid!important;

grid-template-columns:
repeat(4,1fr)!important;

gap:14px!important;

margin-top:12px!important;

margin-bottom:18px!important;

}

.ribbon{

min-height:100px!important;

height:100px!important;

padding:16px 20px!important;

display:grid!important;

grid-template-columns:
60px 1fr!important;

align-items:center!important;

overflow:hidden!important;

}

.ribbon .kpiIcon{

width:50px!important;

height:50px!important;

font-size:20px!important;

border-radius:16px!important;

}

.ribbon small{

font-size:13px!important;

margin-bottom:2px!important;

}

.ribbon h2{

font-size:42px!important;

line-height:1!important;

margin:0!important;

}

.metric,
.metric-card,
.stat-card{

padding:18px!important;

min-height:110px!important;

}

.command,
.ops-card,
.gov{

padding:20px!important;

border-radius:24px!important;

}

.commandTitle,
.ops-title,
.govTitle{

font-size:20px!important;

margin-bottom:14px!important;

}

.dashboard-analytics,
.ops-grid,
.commandGrid,
.govGrid{

gap:16px!important;

margin-top:14px!important;

}

.health{

padding:20px!important;

}

.timeline{

margin-top:10px!important;

}

.statusFooter{

gap:10px!important;

}

.status{

padding:14px!important;

}

@media(max-width:1200px){

.execRibbon{

grid-template-columns:
repeat(2,1fr)!important;

}

}

@media(max-width:700px){

.execRibbon{

grid-template-columns:
1fr!important;

}

.ribbon{

height:auto!important;

}

}



<style>

/* PACK171 */

:root{

--bg:#eef3fb;
--card:#ffffff;
--blue:#0f3fff;
--deep:#061539;
--text:#111827;
--muted:#6b7280;

}

body{

background:var(--bg)!important;

font-family:Cairo!important;

}

.dashboard{

max-width:1820px!important;

padding:16px 18px!important;

}

/* HERO */

.hero{

background:
linear-gradient(
135deg,
#061539,
#214dff
)!important;

border-radius:28px!important;

min-height:140px!important;

padding:28px 40px!important;

display:flex!important;

justify-content:space-between!important;

align-items:center!important;

color:#fff!important;

}

.hero *{

color:#fff!important;

}

.hero h1{

font-size:62px!important;

font-weight:900!important;

margin:0!important;

}

/* KPI */

.execRibbon{

display:grid!important;

grid-template-columns:
repeat(4,1fr)!important;

gap:18px!important;

margin-top:18px!important;

}

.ribbon{

background:#fff!important;

border-radius:24px!important;

padding:26px!important;

height:170px!important;

box-shadow:
0 16px 45px rgba(0,0,0,.06)!important;

}

.ribbon h2{

font-size:60px!important;

color:#071126!important;

}

.ribbon small{

font-size:22px!important;

color:#64748b!important;

}

.ribbon .kpiIcon{

font-size:42px!important;

}

/* MAIN */

.dashboard-main{

display:grid!important;

grid-template-columns:
.85fr 1.15fr!important;

gap:18px!important;

margin-top:18px!important;

}

.dashboard-card{

background:#fff!important;

border-radius:26px!important;

padding:24px!important;

box-shadow:
0 18px 55px rgba(0,0,0,.05)!important;

}

.dashboard-card h3{

font-size:34px!important;

color:#071126!important;

}

/* ACTION */

.quick{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}

.quick a,
.quick button{

height:72px;

border:none;

border-radius:18px;

background:#f6f8fe;

font-weight:900;

font-size:18px;

}

/* WORKFLOW */

.flow{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:16px;

margin-top:20px;

}

.flow div{

height:88px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-weight:900;

font-size:20px;

}

.flow div:nth-child(1){

background:#17b66a;

}

.flow div:nth-child(2){

background:#8134ff;

}

.flow div:nth-child(3){

background:#f59e0b;

}

.flow div:nth-child(4){

background:#0bb8d8;

}

.flow div:nth-child(5){

background:#2455ff;

}

.reviewBox{

margin-top:18px;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

border-radius:24px;

padding:24px;

color:#fff;

}

.reviewBar{

height:16px;

background:rgba(255,255,255,.2);

border-radius:999px;

overflow:hidden;

margin-top:18px;

}

.reviewBar span{

display:block;

width:64%;

height:100%;

background:#4ade80;

}

@media(max-width:1200px){

.execRibbon{

grid-template-columns:
1fr 1fr!important;

}

.dashboard-main{

grid-template-columns:
1fr!important;

}

.flow{

grid-template-columns:
1fr;

}

}

</style>


</style>


</style>

<script>

document.addEventListener('DOMContentLoaded',()=>{

document
.querySelectorAll('.ribbon')
.forEach((c,i)=>{

if(c.querySelector('.kpiIcon')) return;

const icons=[
'📊',
'👥',
'⭐',
'🚀'
];

let n=document.createElement('div');

n.className='kpiIcon';

n.innerHTML=icons[i]||'📌';

c.prepend(n);

});

});

</script>


</style>

<div class="execRibbon">

<div class="ribbon">

<small>Acceptance</small>

<h2>21%</h2>

</div>

<div class="ribbon">

<small>Review Coverage</small>

<h2>84%</h2>

</div>

<div class="ribbon">

<small>Avg Score</small>

<h2>4.6</h2>

</div>

<div class="ribbon">

<small>Publish Ready</small>

<h2>1</h2>

</div>

</div>

<div class="statusStrip">

<div class="chip ok">

● Workflow Active

</div>

<div class="chip info">

● Review Running

</div>

<div class="chip warn">

● 2 Decisions Pending

</div>

<div class="chip ok">

● Mail Healthy

</div>

<div class="chip ok">

● DB Connected

</div>

</div>


</style>


</style>


</style>


</style>


</style>


</style>


</style>

<?php

$sub=(int)($stats['submissions']??0);
$rev=(int)($stats['reviews']??0);
$usr=(int)($stats['users']??0);
$trk=(int)($stats['tracks']??0);

$reviewPct=
$sub
? round(($rev/$sub)*100)
:0;

?>

<div class="wrap">

<div class="hero">

<div class="title">
بوابة المؤتمرات
</div>

<div class="sub">

Executive Workspace ·
Conference #<?= (int)$conferenceId ?>
· Organization #<?= (int)$orgId ?>

</div>

</div>


<div class="metrics">

<?php

$cards=[

['المسارات',$trk,'🧭'],

['المشاركون',$usr,'👥'],

['المراجعات',$rev,'📝'],

['الأبحاث',$sub,'📚']

];

foreach($cards as $c):

?>

<div class="cardx">

<div style="font-size:34px">
<?= $c[2] ?>
</div>

<div class="num">
<?= $c[1] ?>
</div>

<div class="label">
<?= $c[0] ?>
</div>

</div>

<?php endforeach; ?>

</div>


<div class="grid">

<div class="cardx">

<h3>
Workflow Pipeline
</h3>

<div class="pipe">

<div class="stage s1">
Submitted
</div>

<div class="stage s2">
Review
</div>

<div class="stage s3">
Revision
</div>

<div class="stage s4">
Decision
</div>

<div class="stage s5">
Publish
</div>

</div>

</div>

<div class="cardx">

<h3>
Quick Actions
</h3>

<div class="quick">

<a href="/easychair/admin/submissions">
Submissions
</a>

<a href="/easychair/admin/reviewers">
Reviewers
</a>

<a href="/easychair/admin/review-form">
Review Forms
</a>

<a href="/easychair/admin/conference-business">
Conference
</a>

</div>

<div class="health">

<div>

Review Completion

<div class="bar">

<div
class="fill"
style="width:<?= $reviewPct ?>%"
></div>

</div>

<?= $reviewPct ?>%

</div>

</div>

</div>

</div>

</div>


<?php require BASE_PATH.'/app/views/layouts/footer.php'; ?>

<style>

/* PACK145_EXEC */

.dashboard-analytics{

margin-top:28px;

display:grid;

grid-template-columns:
1.3fr .7fr;

gap:22px;

}

.exec-card{

background:#fff;

border-radius:30px;

padding:28px;

box-shadow:
0 24px 70px rgba(15,23,42,.08);

}

.exec-title{

font-size:24px;

font-weight:900;

margin-bottom:22px;

color:#081126;

}

.exec-row{

display:grid;

grid-template-columns:
180px
1fr
60px;

gap:14px;

align-items:center;

margin-bottom:18px;

}

.exec-track{

height:18px;

background:#eef2f7;

border-radius:999px;

overflow:hidden;

}

.exec-fill{

height:100%;

border-radius:999px;

}

.exec-feed{

display:grid;

gap:16px;

}

.feed{

display:flex;

gap:14px;

padding:14px;

background:#f8fbff;

border-radius:18px;

}

.feed i{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

background:#2455ff;

color:#fff;

border-radius:14px;

}

.health{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

margin-top:20px;

}

.health div{

padding:18px;

border-radius:18px;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

}

</style>

<div class="dashboard-analytics">

<div class="exec-card">

<div class="exec-title">

📈 Submission Funnel

</div>

<div class="exec-row">

Submitted

<div class="exec-track">

<div
class="exec-fill"
style="
width:100%;
background:#2455ff">

</div>

</div>

14

</div>


<div class="exec-row">

Review

<div class="exec-track">

<div
class="exec-fill"
style="
width:72%;
background:#06b6d4">

</div>

</div>

9

</div>


<div class="exec-row">

Revision

<div class="exec-track">

<div
class="exec-fill"
style="
width:40%;
background:#f59e0b">

</div>

</div>

3

</div>


<div class="exec-row">

Published

<div class="exec-track">

<div
class="exec-fill"
style="
width:18%;
background:#10b981">

</div>

</div>

1

</div>

</div>


<div class="exec-card">

<div class="exec-title">

⚡ Live Activity

</div>

<div class="exec-feed">

<div class="feed">

<i class="fa fa-user-check"></i>

Reviewer assigned

</div>

<div class="feed">

<i class="fa fa-file-signature"></i>

Decision approved

</div>

<div class="feed">

<i class="fa fa-rocket"></i>

Proceedings generated

</div>

</div>

<div class="health">

<div>

Health

<h2>98%</h2>

</div>

<div>

Coverage

<h2>84%</h2>

</div>

</div>

</div>

</div>


<style>

/* PACK147 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');

body{

font-family:Cairo!important;

background:
linear-gradient(
180deg,
#eef4fb,
#ffffff
)!important;

color:#071126!important;

}

.dashboard{

max-width:1800px!important;

padding:26px!important;

}

.hero{

background:
linear-gradient(
135deg,
#07122e,
#173ec8 65%,
#456fff
)!important;

min-height:220px!important;

border-radius:36px!important;

padding:44px!important;

box-shadow:
0 30px 100px rgba(18,60,200,.24);

}

.hero,
.hero *{

color:#fff!important;

}

.metric,
.metric-card,
.stat-card{

background:#fff!important;

border-radius:28px!important;

box-shadow:
0 20px 60px rgba(15,23,42,.08)!important;

padding:28px!important;

}

.metric *{

color:#071126!important;

}

.metric h2{

font-size:58px!important;

font-weight:900!important;

}

.metric small{

color:#64748b!important;

}

.workflow{

background:#fff!important;

border-radius:28px!important;

padding:30px!important;

}

.workflow *{

color:#071126!important;

}

.workflow-stage{

color:#fff!important;

font-weight:900!important;

border-radius:22px!important;

}

.workflow-stage:nth-child(1){
background:#2563eb!important;
}

.workflow-stage:nth-child(2){
background:#06b6d4!important;
}

.workflow-stage:nth-child(3){
background:#f59e0b!important;
}

.workflow-stage:nth-child(4){
background:#7c3aed!important;
}

.workflow-stage:nth-child(5){
background:#16a34a!important;
}

.quick-actions{

display:grid!important;

grid-template-columns:
1fr 1fr!important;

gap:18px!important;

}

.quick-actions a{

background:
linear-gradient(
180deg,
#f7fbff,
#eef5ff
)!important;

padding:20px!important;

border-radius:20px!important;

font-weight:800!important;

color:#071126!important;

}

.analytics{

display:grid!important;

grid-template-columns:
1fr 1fr!important;

gap:22px!important;

}

.health{

background:
linear-gradient(
135deg,
#071126,
#2455ff
)!important;

color:#fff!important;

border-radius:30px!important;

padding:30px!important;

}

.health *{

color:#fff!important;

}

.activity{

background:#fff!important;

border-radius:30px!important;

padding:30px!important;

}

.activity-item{

padding:16px;

background:#f8fbff;

border-radius:18px;

margin-bottom:14px;

color:#071126!important;

}

.progress{

height:16px!important;

background:#e9eef7!important;

}

.progress-bar{

background:
linear-gradient(
90deg,
#2455ff,
#5b7cff
)!important;

}

h1,h2,h3,h4{

color:#071126!important;

font-weight:900!important;

}

</style>


<style>

/* PACK148 */

.ops-grid{

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:22px;

margin-top:24px;

}

.ops-card{

background:#fff;

border-radius:30px;

padding:28px;

box-shadow:
0 22px 70px rgba(15,23,42,.08);

}

.ops-title{

font-size:24px;

font-weight:900;

color:#071126;

margin-bottom:24px;

}

.funnelRow{

display:grid;

grid-template-columns:
170px
1fr
90px;

gap:14px;

align-items:center;

margin-bottom:18px;

}

.funnelBar{

height:18px;

background:#eef4fb;

border-radius:999px;

overflow:hidden;

}

.fill{

height:100%;

}

.barBlue{background:#2455ff;}
.barCyan{background:#06b6d4;}
.barOrange{background:#f59e0b;}
.barPurple{background:#7c3aed;}
.barGreen{background:#10b981;}

.spark{

display:flex;

height:220px;

align-items:flex-end;

gap:12px;

}

.spark div{

flex:1;

border-radius:16px 16px 0 0;

background:
linear-gradient(
180deg,
#2455ff,
#7c3aed
);

}

.trackRow{

display:grid;

grid-template-columns:
140px
1fr
70px;

gap:12px;

margin-bottom:18px;

}

.health{

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

border-radius:30px;

padding:30px;

}

.health *{

color:#fff;

}

.timeline{

display:grid;

gap:14px;

}

.t{

padding:16px;

border-radius:18px;

background:#f8fbff;

}

.alert{

padding:18px;

background:#fff8e7;

border-left:6px solid #f59e0b;

border-radius:16px;

margin-bottom:14px;

}

</style>

<div class="ops-grid">

<div class="ops-card">

<div class="ops-title">

📊 Submission Funnel

</div>

<div class="funnelRow">

Submitted

<div class="funnelBar">
<div class="fill barBlue"
style="width:100%">
</div>
</div>

14 · 100%

</div>


<div class="funnelRow">

Review

<div class="funnelBar">
<div class="fill barCyan"
style="width:64%">
</div>
</div>

9 · 64%

</div>


<div class="funnelRow">

Revision

<div class="funnelBar">
<div class="fill barOrange"
style="width:21%">
</div>
</div>

3 · 21%

</div>


<div class="funnelRow">

Decision

<div class="funnelBar">
<div class="fill barPurple"
style="width:14%">
</div>
</div>

2 · 14%

</div>


<div class="funnelRow">

Publish

<div class="funnelBar">
<div class="fill barGreen"
style="width:7%">
</div>
</div>

1 · 7%

</div>

</div>



<div class="health">

<h3>

🏥 Conference Health

</h3>

<br>

Review Completion

<div class="progress">

<div
class="progress-bar"
style="
width:64%">

</div>

</div>

<br>

Submission Quality

<div class="progress">

<div
class="progress-bar"
style="
width:89%">

</div>

</div>

<br>

Availability

<h2>

99.8%

</h2>

</div>

</div>


<div class="ops-grid">

<div class="ops-card">

<div class="ops-title">

📈 Review Velocity

</div>

<div class="spark">

<div style="height:45%"></div>

<div style="height:70%"></div>

<div style="height:65%"></div>

<div style="height:92%"></div>

<div style="height:84%"></div>

<div style="height:98%"></div>

</div>

</div>


<div class="ops-card">

<div class="ops-title">

👥 Reviewer Load

</div>

<div class="trackRow">

AI

<div class="funnelBar">
<div
class="fill barBlue"
style="
width:84%">
</div>
</div>

84%

</div>


<div class="trackRow">

Security

<div class="funnelBar">
<div
class="fill barOrange"
style="
width:66%">
</div>
</div>

66%

</div>


<div class="trackRow">

SE

<div class="funnelBar">
<div
class="fill barPurple"
style="
width:92%">
</div>
</div>

92%

</div>

</div>

</div>


<div class="ops-grid">

<div class="ops-card">

<div class="ops-title">

⚠ Executive Alerts

</div>

<div class="alert">

2 submissions waiting decision

</div>

<div class="alert">

1 reviewer overloaded

</div>

</div>


<div class="ops-card">

<div class="ops-title">

⚡ Activity

</div>

<div class="timeline">

<div class="t">

Reviewer assigned

</div>

<div class="t">

Revision uploaded

</div>

<div class="t">

Proceedings generated

</div>

</div>

</div>

</div>


<style>

/* PACK149 */

.govGrid{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:20px;

margin-top:26px;

}

.gov{

background:#fff;

border-radius:30px;

padding:26px;

box-shadow:
0 22px 70px rgba(15,23,42,.08);

}

.govTitle{

font-size:24px;

font-weight:900;

margin-bottom:22px;

color:#071126;

}

.metricLine{

margin-bottom:18px;

}

.metricLine small{

display:block;

font-weight:800;

color:#64748b;

margin-bottom:8px;

}

.metricLine strong{

font-size:36px;

color:#071126;

}

.meter{

height:14px;

background:#edf2f7;

border-radius:999px;

overflow:hidden;

margin-top:10px;

}

.meter div{

height:100%;

border-radius:999px;

background:
linear-gradient(
90deg,
#2455ff,
#7c3aed
);

}

.alertCard{

padding:16px;

background:#fff8e8;

border-left:6px solid #f59e0b;

border-radius:18px;

margin-bottom:14px;

}

.statusFooter{

margin-top:26px;

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:16px;

}

.status{

padding:20px;

border-radius:22px;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

text-align:center;

}

.status *{

color:#fff;

}

@media(max-width:1200px){

.govGrid{

grid-template-columns:1fr;

}

}

</style>


<div class="govGrid">

<div class="gov">

<div class="govTitle">

🏛 Conference Snapshot

</div>

<div class="metricLine">

<small>Acceptance Ratio</small>

<strong>21%</strong>

<div class="meter">

<div style="width:21%"></div>

</div>

</div>

<div class="metricLine">

<small>Reviewer Utilization</small>

<strong>84%</strong>

<div class="meter">

<div style="width:84%"></div>

</div>

</div>

<div class="metricLine">

<small>Avg Review</small>

<strong>4.6</strong>

</div>

</div>



<div class="gov">

<div class="govTitle">

📂 Track Analytics

</div>

AI

<div class="meter">

<div style="width:86%"></div>

</div>

<br>

Security

<div class="meter">

<div style="width:62%"></div>

</div>

<br>

Networking

<div class="meter">

<div style="width:51%"></div>

</div>

<br>

SE

<div class="meter">

<div style="width:74%"></div>

</div>

</div>



<div class="gov">

<div class="govTitle">

⚠ Operational Alerts

</div>

<div class="alertCard">

2 reviews overdue

</div>

<div class="alertCard">

1 paper missing camera ready

</div>

<div class="alertCard">

Security track overloaded

</div>

</div>

</div>


<div class="statusFooter">

<div class="status">

Queue

<h3>OK</h3>

</div>

<div class="status">

Workflow

<h3>Running</h3>

</div>

<div class="status">

Mail

<h3>Healthy</h3>

</div>

<div class="status">

Publish

<h3>Ready</h3>

</div>

<div class="status">

DB

<h3>99.8%</h3>

</div>

</div>


<style>

/* PACK151 */

.commandGrid{

display:grid;

grid-template-columns:
1.2fr .8fr;

gap:22px;

margin-top:26px;

}

.command{

background:#fff;

border-radius:32px;

padding:28px;

box-shadow:
0 22px 70px rgba(15,23,42,.08);

}

.commandTitle{

font-size:24px;

font-weight:900;

color:#071126;

margin-bottom:24px;

}

.timeline{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

margin-top:30px;

}

.timeline:before{

content:'';

position:absolute;

left:0;

right:0;

top:30px;

height:4px;

background:#e8eef8;

}

.node{

position:relative;

z-index:2;

text-align:center;

}

.dot{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:900;

color:#fff;

margin:auto;

}

.done{

background:#10b981;

}

.active{

background:#2455ff;

}

.wait{

background:#94a3b8;

}

.monitor{

display:grid;

gap:16px;

}

.monitorRow{

display:grid;

grid-template-columns:
180px
1fr
80px;

gap:12px;

align-items:center;

}

.monitorBar{

height:18px;

background:#eef4fb;

border-radius:999px;

overflow:hidden;

}

.monitorFill{

height:100%;

}

.notify{

padding:18px;

background:#f8fbff;

border-radius:18px;

margin-bottom:14px;

}

.launchGrid{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:16px;

}

.launch{

padding:20px;

border-radius:20px;

text-align:center;

background:
linear-gradient(
135deg,
#f7fbff,
#eef4ff
);

font-weight:900;

}

</style>


<div class="commandGrid">

<div class="command">

<div class="commandTitle">

🧭 Conference Progress Timeline

</div>

<div class="timeline">

<div class="node">

<div class="dot done">

✓

</div>

Submitted

</div>

<div class="node">

<div class="dot done">

✓

</div>

Review

</div>

<div class="node">

<div class="dot active">

3

</div>

Decision

</div>

<div class="node">

<div class="dot wait">

4

</div>

Publish

</div>

</div>

</div>



<div class="command">

<div class="commandTitle">

⚠ Review SLA

</div>

<div class="monitor">

<div class="monitorRow">

AI

<div class="monitorBar">

<div
class="monitorFill"
style="
width:92%;
background:#10b981">

</div>

</div>

92%

</div>

<div class="monitorRow">

Security

<div class="monitorBar">

<div
class="monitorFill"
style="
width:66%;
background:#f59e0b">

</div>

</div>

66%

</div>

<div class="monitorRow">

SE

<div class="monitorBar">

<div
class="monitorFill"
style="
width:44%;
background:#ef4444">

</div>

</div>

44%

</div>

</div>

</div>

</div>


<div class="commandGrid">

<div class="command">

<div class="commandTitle">

🔔 Notifications

</div>

<div class="notify">

2 decisions pending

</div>

<div class="notify">

1 reviewer overloaded

</div>

<div class="notify">

Camera ready due

</div>

</div>



<div class="command">

<div class="commandTitle">

⚡ Operations

</div>

<div class="launchGrid">

<div class="launch">

Assign Reviewer

</div>

<div class="launch">

Generate Proceeding

</div>

<div class="launch">

Publish

</div>

<div class="launch">

Notify Authors

</div>

<div class="launch">

Review Form

</div>

<div class="launch">

Export Reports

</div>

</div>

</div>

</div>



<style>

/* PACK154_EXEC */

.execAnalytics{

display:grid!important;

grid-template-columns:
1.2fr .8fr!important;

gap:16px!important;

margin-top:16px!important;

}

.execStack{

display:grid!important;

gap:16px!important;

}

.execBox{

background:#fff!important;

border-radius:24px!important;

padding:20px!important;

box-shadow:
0 18px 60px rgba(15,23,42,.07)!important;

}

.execHead{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.execHead h3{

margin:0;

font-size:22px;

color:#071126;

}

.funnelItem{

display:grid;

grid-template-columns:
140px
1fr
70px;

gap:10px;

margin-bottom:14px;

}

.funnelTrack{

height:12px;

border-radius:999px;

background:#edf3ff;

overflow:hidden;

}

.funnelFill{

height:100%;

border-radius:999px;

}

.healthGrid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;

}

.healthCell{

padding:18px;

border-radius:18px;

background:
linear-gradient(
135deg,
#081226,
#2455ff
);

color:#fff;

}

.healthCell h2{

color:#fff!important;

margin:0;

}

.activityItem{

padding:14px;

border-radius:16px;

background:#f7fbff;

margin-bottom:10px;

}

.actionGrid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:10px;

}

.actionBtn{

padding:16px;

border-radius:16px;

text-align:center;

background:
linear-gradient(
180deg,
#f7fbff,
#eef4ff
);

font-weight:800;

}

</style>

<div class="execAnalytics">

<div class="execStack">

<div class="execBox">

<div class="execHead">

<h3>📊 Submission Funnel</h3>

<span>Live</span>

</div>

<div class="funnelItem">

Submitted

<div class="funnelTrack">

<div
class="funnelFill"
style="
width:100%;
background:#2455ff">

</div>

</div>

14

</div>

<div class="funnelItem">

Review

<div class="funnelTrack">

<div
class="funnelFill"
style="
width:64%;
background:#06b6d4">

</div>

</div>

9

</div>

<div class="funnelItem">

Revision

<div class="funnelTrack">

<div
class="funnelFill"
style="
width:21%;
background:#f59e0b">

</div>

</div>

3

</div>

<div class="funnelItem">

Decision

<div class="funnelTrack">

<div
class="funnelFill"
style="
width:14%;
background:#7c3aed">

</div>

</div>

2

</div>

</div>


<!-- PACK 957A -->
<div class="execBox">

<div class="execHead">

<h3>🧠 Decision Queue</h3>

<span>AI</span>

</div>

<div
style="
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:12px;
">

<div
style="
padding:14px;
border-radius:16px;
background:#ecfdf5;
border-left:6px solid #10b981;
">

<div style="font-size:12px;color:#64748b;">
Accept
</div>

<div
style="
font-size:30px;
font-weight:900;
color:#059669;
">
<?= (int)($decisionQueue['accept'] ?? 0) ?>
</div>

</div>


<div
style="
padding:14px;
border-radius:16px;
background:#eff6ff;
border-left:6px solid #2563eb;
">

<div style="font-size:12px;color:#64748b;">
Minor Revision
</div>

<div
style="
font-size:30px;
font-weight:900;
color:#2563eb;
">
<?= (int)($decisionQueue['minor_revision'] ?? 0) ?>
</div>

</div>


<div
style="
padding:14px;
border-radius:16px;
background:#fff7ed;
border-left:6px solid #f59e0b;
">

<div style="font-size:12px;color:#64748b;">
Major Revision
</div>

<div
style="
font-size:30px;
font-weight:900;
color:#d97706;
">
<?= (int)($decisionQueue['major_revision'] ?? 0) ?>
</div>

</div>


<div
style="
padding:14px;
border-radius:16px;
background:#fef2f2;
border-left:6px solid #ef4444;
">

<div style="font-size:12px;color:#64748b;">
Reject
</div>

<div
style="
font-size:30px;
font-weight:900;
color:#dc2626;
">
<?= (int)($decisionQueue['reject'] ?? 0) ?>
</div>

</div>

</div>

</div>


<div class="execBox">

<div class="execHead">

<div class="card border-0 shadow-sm mb-4">
<div class="card-body">

<h3 class="fw-bold mb-4">

🏛 Enterprise Portfolio

</h3>

<div class="row g-3">

<?php foreach(($conferencePortfolio ?? []) as $c): ?>

<div class="col-xl-3 col-lg-4 col-md-6">

<div class="border rounded-4 p-4 h-100">

<h5>
<?= htmlspecialchars($c['title'] ?? '') ?>
</h5>

<div class="small text-muted mb-3">
<?= htmlspecialchars($c['status'] ?? '') ?>
</div>

<div class="d-flex justify-content-between">

<span>Submissions</span>

<strong>
<?= (int)($c['submissions'] ?? 0) ?>
</strong>

</div>

</div>

</div>

<?php endforeach; ?>

</div>

</div>

</div>

<h3>🏥 Conference Health</h3>

<span>Healthy</span>

</div>

<div class="healthGrid">

<div class="healthCell">

Review

<h2>84%</h2>

</div>

<div class="healthCell">

Quality

<h2>92%</h2>

</div>

<div class="healthCell">

Workflow

<h2>98%</h2>

</div>

<div class="healthCell">

Publish

<h2>64%</h2>

</div>

</div>

</div>

</div>



<div class="execStack">

<div class="execBox">

<div class="execHead">

<h3>⚡ Activity</h3>

</div>

<div class="activityItem">

Reviewer assigned

</div>

<div class="activityItem">

Revision uploaded

</div>

<div class="activityItem">

Decision approved

</div>

<div class="activityItem">

Proceedings generated

</div>

</div>


<div class="execBox">

<div class="execHead">
<!-- PACK 1000 ENTERPRISE CONTROL CENTER -->

<div class="ec-enterprise-control mb-4">

<div class="row g-3">

<div class="col-xl-2 col-md-4 col-6">
<div class="ec-enterprise-tile">
<i class="fa fa-building"></i>
<h3><?= (int)($dashboard['organizations'] ?? 0) ?></h3>
<span>Organizations</span>
</div>
</div>

<div class="col-xl-2 col-md-4 col-6">
<div class="ec-enterprise-tile">
<i class="fa fa-calendar-days"></i>
<h3><?= (int)($dashboard['conferences'] ?? 0) ?></h3>
<span>Conferences</span>
</div>
</div>

<div class="col-xl-2 col-md-4 col-6">
<div class="ec-enterprise-tile">
<i class="fa fa-users"></i>
<h3><?= (int)($dashboard['users'] ?? 0) ?></h3>
<span>Users</span>
</div>
</div>

<div class="col-xl-2 col-md-4 col-6">
<div class="ec-enterprise-tile">
<i class="fa fa-file-lines"></i>
<h3><?= (int)($dashboard['submissions'] ?? 0) ?></h3>
<span>Submissions</span>
</div>
</div>

<div class="col-xl-2 col-md-4 col-6">
<div class="ec-enterprise-tile">
<i class="fa fa-user-check"></i>
<h3><?= (int)($dashboard['reviewers'] ?? 0) ?></h3>
<span>Reviewers</span>
</div>
</div>

<div class="col-xl-2 col-md-4 col-6">
<div class="ec-enterprise-tile">
<i class="fa fa-book-open"></i>
<h3><?= (int)($dashboard['published'] ?? 0) ?></h3>
<span>Published</span>
</div>
</div>

</div>

</div>
<h3>🚀 Quick Actions</h3>

</div>

<div class="actionGrid">

<div class="actionBtn">

Assign Reviewer

</div>

<div class="actionBtn">

Open Workflow

</div>

<div class="actionBtn">

Notify Authors

</div>

<div class="actionBtn">

Export Report

</div>

</div>

</div>

</div>

</div>


<style>

/* PACK155 */

.intelGrid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:16px;

margin-top:18px;

}

.intel{

background:#fff;

border-radius:24px;

padding:20px;

box-shadow:
0 18px 60px rgba(15,23,42,.06);

}

.intelTitle{

font-size:22px;

font-weight:900;

margin-bottom:18px;

color:#071126;

}

.ringWrap{

display:flex;

justify-content:center;

}

.ring{

width:230px;

height:230px;

border-radius:50%;

background:
conic-gradient(
#2455ff 0 64%,
#16a34a 64% 84%,
#f59e0b 84% 100%
);

display:flex;

align-items:center;

justify-content:center;

}

.ringInner{

width:160px;

height:160px;

background:#fff;

border-radius:50%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.ringInner h1{

margin:0;

font-size:54px;

}

.heat{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:10px;

}

.cell{

height:70px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-weight:900;

color:#fff;

}

.l1{background:#10b981;}
.l2{background:#22c55e;}
.l3{background:#f59e0b;}
.l4{background:#ef4444;}
.l5{background:#991b1b;}

.pipe{

display:flex;

gap:10px;

align-items:center;

justify-content:space-between;

}

.stage{

flex:1;

padding:18px;

border-radius:18px;

text-align:center;

font-weight:900;

color:#fff;

}

.s1{background:#2563eb;}
.s2{background:#06b6d4;}
.s3{background:#f59e0b;}
.s4{background:#7c3aed;}
.s5{background:#10b981;}

.alertBox{

padding:16px;

background:#fff8e8;

border-left:6px solid #f59e0b;

border-radius:16px;

margin-bottom:10px;

}

</style>


<div class="intelGrid">


<div class="intel">

<div class="intelTitle">

🎯 Conference Health

</div>

<div class="ringWrap">

<div class="ring">

<div class="ringInner">

<h1>

84%

</h1>

<span>

Healthy

</span>

</div>

</div>

</div>

</div>



<div class="intel">

<div class="intelTitle">

🔥 Reviewer Heatmap

</div>

<div class="heat">

<div class="cell l1">AI</div>

<div class="cell l2">SEC</div>

<div class="cell l3">NET</div>

<div class="cell l4">SE</div>

<div class="cell l5">DS</div>

</div>

</div>



<div class="intel">

<div class="intelTitle">

🔄 Workflow Timeline

</div>

<div class="pipe">

<div class="stage s1">

Submit

</div>

→

<div class="stage s2">

Review

</div>

→

<div class="stage s3">

Revision

</div>

→

<div class="stage s4">

Decision

</div>

→

<div class="stage s5">

Publish

</div>

</div>

</div>



<div class="intel">

<div class="intelTitle">

⚠ Executive Alerts

</div>

<div class="alertBox">

2 decisions pending

</div>

<div class="alertBox">

1 overloaded reviewer

</div>

<div class="alertBox">

Camera ready due

</div>

</div>


</div>


<style>

/* PACK156 */

.cc{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:14px;

margin-top:14px;

}

.ccCard{

background:#fff;

border-radius:24px;

padding:18px;

box-shadow:
0 14px 50px rgba(15,23,42,.06);

min-height:220px;

}

.ccTitle{

font-size:20px;

font-weight:900;

margin-bottom:14px;

}

.miniDonut{

width:180px;

height:180px;

margin:auto;

border-radius:50%;

background:
conic-gradient(
#2455ff 0 74%,
#06b6d4 74% 89%,
#e5e7eb 89%
);

display:flex;

align-items:center;

justify-content:center;

}

.miniInner{

width:130px;

height:130px;

border-radius:50%;

background:#fff;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.miniInner h1{

margin:0;

font-size:40px;

}

.trend{

display:flex;

align-items:flex-end;

gap:8px;

height:170px;

}

.trend div{

flex:1;

border-radius:16px 16px 0 0;

background:
linear-gradient(
180deg,
#2455ff,
#6a7fff
);

}

.cmd{

display:grid;

grid-template-columns:
1fr 1fr;

gap:10px;

}

.cmd div{

padding:16px;

border-radius:16px;

text-align:center;

background:
linear-gradient(
180deg,
#f7fbff,
#eef4ff
);

font-weight:900;

}

.calendar{

display:flex;

gap:10px;

overflow:auto;

}

.day{

min-width:80px;

padding:14px;

border-radius:18px;

background:#f7fbff;

text-align:center;

}

.day.active{

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

}

</style>


<div class="cc">

<div class="ccCard">

<div class="ccTitle">

🎯 Completion

</div>

<div class="miniDonut">

<div class="miniInner">

<h1>

84%

</h1>

Live

</div>

</div>

</div>


<div class="ccCard">

<div class="ccTitle">

📈 Trend

</div>

<div class="trend">

<div style="height:35%"></div>

<div style="height:44%"></div>

<div style="height:62%"></div>

<div style="height:55%"></div>

<div style="height:78%"></div>

<div style="height:92%"></div>

</div>

</div>



<div class="ccCard">

<div class="ccTitle">

⚡ Commands

</div>

<div class="cmd">

<div>

Assign

</div>

<div>

Notify

</div>

<div>

Publish

</div>

<div>

Export

</div>

</div>

</div>

</div>



<div class="ccCard"
style="
margin-top:14px
">

<div class="ccTitle">

📅 Conference Calendar

</div>

<div class="calendar">

<div class="day">

MON

</div>

<div class="day active">

TUE

</div>

<div class="day">

WED

</div>

<div class="day">

THU

</div>

<div class="day">

FRI

</div>

<div class="day">

SAT

</div>

</div>

</div>


<style>

/* PACK157 */

.workspaceTop{

position:sticky;

top:10px;

z-index:30;

display:grid;

grid-template-columns:
1.4fr .8fr .8fr;

gap:14px;

margin-top:18px;

margin-bottom:20px;

}

.topCard{

background:
rgba(255,255,255,.85);

backdrop-filter:
blur(18px);

border-radius:24px;

padding:18px;

box-shadow:
0 18px 50px rgba(15,23,42,.08);

}

.searchBar{

height:58px;

border:none;

width:100%;

padding:0 22px;

border-radius:999px;

background:#f7fbff;

font-size:16px;

}

.searchBar:focus{

outline:none;

}

.healthStrip{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:14px;

}

.healthChip{

padding:10px 16px;

border-radius:999px;

font-weight:900;

}

.green{

background:#ecfdf5;

color:#059669;

}

.blue{

background:#eef4ff;

color:#2455ff;

}

.orange{

background:#fff8e8;

color:#d97706;

}

.notifyMini{

display:grid;

gap:10px;

}

.note{

padding:14px;

border-radius:16px;

background:#f8fbff;

font-weight:700;

}

.reviewBoard{

display:grid;

gap:10px;

}

.rev{

display:grid;

grid-template-columns:
1fr 70px;

gap:10px;

padding:12px;

background:#f8fbff;

border-radius:16px;

}

.rank{

background:
linear-gradient(
135deg,
#2455ff,
#6a7fff
);

color:#fff;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

}

</style>


<div class="workspaceTop">

<div class="topCard">

<input
class="searchBar"
placeholder="Search papers, reviewers, authors…">

<div class="healthStrip">

<div class="healthChip green">

● DB Healthy

</div>

<div class="healthChip blue">

● Workflow Active

</div>

<div class="healthChip orange">

● 2 Pending

</div>

</div>

</div>



<div class="topCard">

<h4>

🔔 Notifications

</h4>

<div class="notifyMini">

<div class="note">

3 new submissions

</div>

<div class="note">

2 reviews pending

</div>

<div class="note">

Camera ready due

</div>

</div>

</div>



<div class="topCard">

<h4>

🏆 Reviewer Board

</h4>

<div class="reviewBoard">

<div class="rev">

Reviewer A

<div class="rank">

9

</div>

</div>

<div class="rev">

Reviewer B

<div class="rank">

7

</div>

</div>

<div class="rev">

Reviewer C

<div class="rank">

6

</div>

</div>

</div>

</div>

</div>


<style>

/* PACK158 */

.dashboard{

padding:12px 16px!important;

}

.dashboard > *{

margin-bottom:14px!important;

}

.topDock{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:12px;

margin-bottom:16px;

}

.dock{

padding:14px 20px;

border-radius:999px;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

font-weight:900;

box-shadow:
0 18px 40px rgba(36,85,255,.18);

}

.compactGrid{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:14px;

}

.compact{

background:#fff;

border-radius:22px;

padding:18px;

box-shadow:
0 14px 40px rgba(15,23,42,.06);

}

.compactTitle{

font-size:18px;

font-weight:900;

margin-bottom:14px;

}

.matrix{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:8px;

}

.m{

height:58px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-weight:900;

}

.g1{background:#10b981;}
.g2{background:#22c55e;}
.g3{background:#f59e0b;}
.g4{background:#ef4444;}
.g5{background:#7f1d1d;}

.liveStrip{

display:grid;

grid-template-columns:
repeat(6,1fr);

gap:10px;

margin-top:14px;

}

.live{

padding:14px;

border-radius:16px;

background:#f7fbff;

text-align:center;

}

.live h3{

margin:0;

}

@media(max-width:1200px){

.compactGrid{

grid-template-columns:1fr;

}

.liveStrip{

grid-template-columns:
1fr 1fr;

}

}

</style>


<div class="topDock">

<div class="dock">

＋ New Submission

</div>

<div class="dock">

👥 Assign Reviewer

</div>

<div class="dock">

📨 Notify

</div>

<div class="dock">

📄 Proceedings

</div>

<div class="dock">

📊 Export

</div>

</div>



<div class="compactGrid">

<div class="compact">

<div class="compactTitle">

🔥 Reviewer Matrix

</div>

<div class="matrix">

<div class="m g1">

AI

</div>

<div class="m g2">

SEC

</div>

<div class="m g3">

NET

</div>

<div class="m g4">

SE

</div>

<div class="m g5">

DS

</div>

</div>

</div>



<div class="compact">

<div class="compactTitle">

📈 Today

</div>

<h1>

+14

</h1>

Reviews

</div>



<div class="compact">

<div class="compactTitle">

⚡ Pending

</div>

<h1>

3

</h1>

Actions

</div>

</div>



<div class="liveStrip">

<div class="live">

<h3>

99.8%

</h3>

DB

</div>

<div class="live">

<h3>

84%

</h3>

Coverage

</div>

<div class="live">

<h3>

21%

</h3>

Accept

</div>

<div class="live">

<h3>

9

</h3>

Reviewers

</div>

<div class="live">

<h3>

14

</h3>

Papers

</div>

<div class="live">

<h3>

OK

</h3>

Queue

</div>

</div>


<style>

/* PACK159 */

:root{

--glass:
rgba(255,255,255,.72);

}

.dashboard{

max-width:1900px!important;

padding:12px!important;

}

.dashboard > *{

margin-bottom:12px!important;

}

.execBar{

position:sticky;

top:12px;

z-index:40;

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:16px;

}

.execBtn{

padding:12px 18px;

border-radius:999px;

backdrop-filter:
blur(16px);

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

font-weight:900;

box-shadow:
0 16px 40px rgba(36,85,255,.18);

}

.glassGrid{

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:14px;

}

.glass{

background:
var(--glass);

backdrop-filter:
blur(18px);

border-radius:24px;

padding:18px;

box-shadow:
0 16px 50px rgba(15,23,42,.06);

}

.glassTitle{

font-size:20px;

font-weight:900;

margin-bottom:16px;

}

.miniChart{

display:flex;

height:150px;

gap:8px;

align-items:flex-end;

}

.miniChart div{

flex:1;

border-radius:14px 14px 0 0;

background:
linear-gradient(
180deg,
#2455ff,
#6a7fff
);

}

.alertFloat{

display:grid;

gap:10px;

}

.alertFloat div{

padding:14px;

border-radius:14px;

background:#fff8e8;

border-left:5px solid #f59e0b;

}

.palette{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:10px;

}

.palette div{

padding:18px;

border-radius:16px;

background:
linear-gradient(
180deg,
#f7fbff,
#eef4ff
);

text-align:center;

font-weight:900;

}

.strip{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:10px;

margin-top:14px;

}

.strip div{

padding:12px;

background:#fff;

border-radius:14px;

text-align:center;

}

@media(max-width:1200px){

.glassGrid{

grid-template-columns:1fr;

}

.palette{

grid-template-columns:
1fr 1fr;

}

}

</style>



<div class="execBar">

<div class="execBtn">

＋ Submission

</div>

<div class="execBtn">

👥 Assign

</div>

<div class="execBtn">

📨 Notify

</div>

<div class="execBtn">

📄 Publish

</div>

<div class="execBtn">

📊 Reports

</div>

</div>



<div class="glassGrid">

<div class="glass">

<div class="glassTitle">

📈 Executive Trend

</div>

<div class="miniChart">

<div style="height:42%"></div>

<div style="height:66%"></div>

<div style="height:58%"></div>

<div style="height:72%"></div>

<div style="height:86%"></div>

<div style="height:100%"></div>

</div>

<div class="strip">

<div>

21%

<br>

Accept

</div>

<div>

84%

<br>

Review

</div>

<div>

14

<br>

Papers

</div>

<div>

9

<br>

Rev.

</div>

<div>

OK

<br>

DB

</div>

</div>

</div>



<div class="glass">

<div class="glassTitle">

⚡ Command Palette

</div>

<div class="palette">

<div>

Workflow

</div>

<div>

Authors

</div>

<div>

Reviewers

</div>

<div>

Proceeding

</div>

<div>

Export

</div>

<div>

Analytics

</div>

</div>

<div style="height:16px"></div>

<div class="glassTitle">

🔔 Alerts

</div>

<div class="alertFloat">

<div>

2 papers waiting decision

</div>

<div>

1 reviewer overloaded

</div>

<div>

Camera ready pending

</div>

</div>

</div>

</div>


<style>

/* PACK160 */

body{

background:
linear-gradient(
180deg,
#eef4fb,
#fbfdff
)!important;

}

.darkExec{

margin-top:14px;

display:grid;

grid-template-columns:
1.2fr .8fr;

gap:14px;

}

.darkPanel{

background:
linear-gradient(
135deg,
#071126,
#102a75
);

color:#fff;

border-radius:28px;

padding:22px;

box-shadow:
0 24px 70px rgba(7,18,38,.24);

}

.darkPanel *{

color:#fff;

}

.darkTitle{

font-size:22px;

font-weight:900;

margin-bottom:18px;

}

.wave{

display:flex;

align-items:flex-end;

gap:8px;

height:180px;

}

.wave div{

flex:1;

border-radius:18px 18px 0 0;

background:
linear-gradient(
180deg,
#5b7cff,
#7dd3fc
);

}

.rankBoard{

display:grid;

gap:10px;

}

.rankItem{

display:grid;

grid-template-columns:
1fr 70px;

gap:10px;

padding:12px;

border-radius:16px;

background:
rgba(255,255,255,.08);

}

.rankScore{

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:
rgba(255,255,255,.14);

font-weight:900;

}

.execDock{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:18px;

}

.execAction{

padding:14px 18px;

border-radius:999px;

background:
rgba(255,255,255,.10);

font-weight:900;

}

.miniStats{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:10px;

margin-top:18px;

}

.mini{

padding:16px;

background:
rgba(255,255,255,.08);

border-radius:16px;

text-align:center;

}

.mini h2{

margin:0;

}

@media(max-width:1200px){

.darkExec{

grid-template-columns:1fr;

}

.miniStats{

grid-template-columns:
1fr 1fr;

}

}

</style>



<div class="darkExec">


<div class="darkPanel">

<div class="darkTitle">

📈 Executive Performance

</div>

<div class="wave">

<div style="height:35%"></div>

<div style="height:52%"></div>

<div style="height:61%"></div>

<div style="height:72%"></div>

<div style="height:84%"></div>

<div style="height:100%"></div>

</div>

<div class="miniStats">

<div class="mini">

<h2>

14

</h2>

Papers

</div>

<div class="mini">

<h2>

84%

</h2>

Review

</div>

<div class="mini">

<h2>

21%

</h2>

Accept

</div>

<div class="mini">

<h2>

98%

</h2>

Health

</div>

</div>

</div>




<div class="darkPanel">

<div class="darkTitle">

🏆 Reviewer Board

</div>

<div class="rankBoard">

<div class="rankItem">

Reviewer A

<div class="rankScore">

9

</div>

</div>

<div class="rankItem">

Reviewer B

<div class="rankScore">

8

</div>

</div>

<div class="rankItem">

Reviewer C

<div class="rankScore">

7

</div>

</div>

</div>


<div class="execDock">

<div class="execAction">

Assign

</div>

<div class="execAction">

Notify

</div>

<div class="execAction">

Publish

</div>

<div class="execAction">

Export

</div>

</div>

</div>


</div>


<style>

/* PACK161 */

.opsCenter{

display:grid;

grid-template-columns:
1.3fr .7fr;

gap:14px;

margin-top:14px;

}

.opsPanel{

background:#fff;

border-radius:24px;

padding:18px;

box-shadow:
0 18px 60px rgba(15,23,42,.06);

}

.opsTitle{

font-size:20px;

font-weight:900;

margin-bottom:16px;

color:#071126;

}

.execSearch{

width:100%;

height:56px;

border:none;

background:#f7fbff;

padding:0 22px;

border-radius:999px;

font-size:16px;

}

.execSearch:focus{

outline:none;

}

.timelineCompact{

display:flex;

justify-content:space-between;

gap:8px;

margin-top:18px;

}

.stepCompact{

flex:1;

padding:14px;

border-radius:18px;

text-align:center;

font-weight:900;

}

.done{
background:#dcfce7;
}

.active{
background:#dbeafe;
}

.wait{
background:#f3f4f6;
}

.workload{

display:grid;

gap:14px;

margin-top:18px;

}

.load{

display:grid;

grid-template-columns:
120px
1fr
70px;

gap:10px;

align-items:center;

}

.loadBar{

height:12px;

background:#eef4fb;

border-radius:999px;

overflow:hidden;

}

.loadFill{

height:100%;

border-radius:999px;

}

.notifyFloat{

display:grid;

gap:10px;

}

.notifyCard{

padding:14px;

border-radius:16px;

background:#f8fbff;

}

.kpiCompact{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:10px;

margin-top:16px;

}

.kpiCompact div{

padding:14px;

background:#f7fbff;

border-radius:16px;

text-align:center;

}

@media(max-width:1200px){

.opsCenter{

grid-template-columns:1fr;

}

.kpiCompact{

grid-template-columns:
1fr 1fr;

}

}

</style>


<div class="opsCenter">

<div class="opsPanel">

<div class="opsTitle">

🔎 Executive Search

</div>

<input
class="execSearch"
placeholder="Search submission, reviewer, author…">


<div class="opsTitle"
style="
margin-top:20px
">

🧭 Conference Timeline

</div>

<div class="timelineCompact">

<div class="stepCompact done">

Submit

</div>

<div class="stepCompact done">

Review

</div>

<div class="stepCompact active">

Decision

</div>

<div class="stepCompact wait">

Publish

</div>

</div>


<div class="opsTitle"
style="
margin-top:20px
">

👥 Reviewer Workload

</div>

<div class="workload">

<div class="load">

AI

<div class="loadBar">

<div
class="loadFill"
style="
width:84%;
background:#2455ff">

</div>

</div>

84%

</div>


<div class="load">

Security

<div class="loadBar">

<div
class="loadFill"
style="
width:67%;
background:#06b6d4">

</div>

</div>

67%

</div>


<div class="load">

SE

<div class="loadBar">

<div
class="loadFill"
style="
width:42%;
background:#ef4444">

</div>

</div>

42%

</div>

</div>

</div>



<div class="opsPanel">

<div class="opsTitle">

🔔 Executive Feed

</div>

<div class="notifyFloat">

<div class="notifyCard">

3 submissions received

</div>

<div class="notifyCard">

2 decisions pending

</div>

<div class="notifyCard">

1 reviewer overloaded

</div>

</div>

<div class="kpiCompact">

<div>

<b>14</b>

<br>

Papers

</div>

<div>

<b>84%</b>

<br>

Review

</div>

<div>

<b>21%</b>

<br>

Accept

</div>

<div>

<b>98%</b>

<br>

Health

</div>

</div>

</div>

</div>


<style>

/* PACK162 */

.mission{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:14px;

margin-top:14px;

}

.missionCard{

background:#fff;

border-radius:22px;

padding:18px;

box-shadow:
0 14px 50px rgba(15,23,42,.06);

min-height:240px;

}

.missionTitle{

font-size:20px;

font-weight:900;

margin-bottom:14px;

color:#071126;

}

.calendarHeat{

display:grid;

grid-template-columns:
repeat(7,1fr);

gap:8px;

}

.dayHeat{

height:70px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

font-weight:900;

color:#fff;

}

.h1{background:#10b981;}
.h2{background:#22c55e;}
.h3{background:#84cc16;}
.h4{background:#f59e0b;}
.h5{background:#ef4444;}

.board{

display:grid;

gap:10px;

}

.userRow{

display:grid;

grid-template-columns:
1fr 70px;

gap:10px;

padding:12px;

background:#f8fbff;

border-radius:16px;

}

.score{

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:
linear-gradient(
135deg,
#2455ff,
#6a7fff
);

color:#fff;

font-weight:900;

}

.monitor{

display:grid;

gap:12px;

}

.mon{

display:grid;

grid-template-columns:
120px
1fr
60px;

gap:10px;

align-items:center;

}

.monTrack{

height:12px;

background:#eef4fb;

border-radius:999px;

overflow:hidden;

}

.monFill{

height:100%;

}

.execFooter{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:10px;

margin-top:14px;

}

.foot{

padding:14px;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

border-radius:18px;

color:#fff;

text-align:center;

}

.foot *{

color:#fff;

}

@media(max-width:1200px){

.mission{

grid-template-columns:1fr;

}

.execFooter{

grid-template-columns:
1fr 1fr;

}

}

</style>


<div class="mission">


<div class="missionCard">

<div class="missionTitle">

📅 Conference Calendar

</div>

<div class="calendarHeat">

<div class="dayHeat h1">M</div>

<div class="dayHeat h2">T</div>

<div class="dayHeat h3">W</div>

<div class="dayHeat h4">T</div>

<div class="dayHeat h5">F</div>

<div class="dayHeat h3">S</div>

<div class="dayHeat h1">S</div>

</div>

</div>



<div class="missionCard">

<div class="missionTitle">

🏆 Reviewer Leaderboard

</div>

<div class="board">

<div class="userRow">

Reviewer A

<div class="score">

9

</div>

</div>

<div class="userRow">

Reviewer B

<div class="score">

8

</div>

</div>

<div class="userRow">

Reviewer C

<div class="score">

7

</div>

</div>

<div class="userRow">

Reviewer D

<div class="score">

6

</div>

</div>

</div>

</div>



<div class="missionCard">

<div class="missionTitle">

🛰 System Monitor

</div>

<div class="monitor">

<div class="mon">

Workflow

<div class="monTrack">

<div
class="monFill"
style="
width:98%;
background:#10b981">

</div>

</div>

98%

</div>


<div class="mon">

Review

<div class="monTrack">

<div
class="monFill"
style="
width:84%;
background:#2455ff">

</div>

</div>

84%

</div>


<div class="mon">

Publish

<div class="monTrack">

<div
class="monFill"
style="
width:62%;
background:#f59e0b">

</div>

</div>

62%

</div>

</div>

</div>


</div>



<div class="execFooter">

<div class="foot">

Queue

<h3>

OK

</h3>

</div>

<div class="foot">

DB

<h3>

99.8%

</h3>

</div>

<div class="foot">

Mail

<h3>

Healthy

</h3>

</div>

<div class="foot">

Workflow

<h3>

Active

</h3>

</div>

<div class="foot">

Publish

<h3>

Ready

</h3>

</div>

</div>


<style>

/* PACK167 */

.pack167-hidden{

display:none!important;

}

.dashboard>*{

margin-bottom:10px!important;

}

</style>

<script>

document.addEventListener('DOMContentLoaded',()=>{

const removeAlways=[

'Workflow Pipeline',
'Executive Alerts'

];

const keepLast=[

'Submission Funnel',
'Conference Health',
'Activity',
'Notifications',
'Command Palette',
'Operations'

];

function title(el){

return (
el.querySelector('h1,h2,h3,h4,h5')
?.innerText
||''
).trim();

}

const cards=[
...document.querySelectorAll(
'.card,.exec-card,.ops-card,.command,.gov,.intel,.ccCard,.glass,.opsPanel,.missionCard,section'
)
];

cards.forEach(c=>{

const t=title(c);

if(
removeAlways.some(
x=>t.includes(x)
)
){

c.classList.add(
'pack167-hidden'
);

}

});

keepLast.forEach(name=>{

const found=
cards.filter(
c=>
title(c)
.includes(name)
);

if(found.length>1){

found
.slice(0,-1)
.forEach(
x=>
x.classList.add(
'pack167-hidden'
)
);

}

});

});

</script>


<style>

/* PACK168 */

.dashboard{

max-width:1900px!important;

padding:10px 14px!important;

}

.dashboard>*{

margin-bottom:10px!important;

}

/* keep KPI in one row */

.execRibbon{

display:grid!important;

grid-template-columns:
repeat(4,1fr)!important;

gap:10px!important;

}

/* compress cards */

.card,
.metric,
.metric-card,
.stat-card,
.exec-card,
.ops-card,
.command,
.gov,
.intel,
.ccCard,
.glass,
.opsPanel,
.missionCard,
.darkPanel{

padding:14px!important;

border-radius:18px!important;

min-height:auto!important;

}

/* convert lower dashboard into dense flow */

.execAnalytics,
.ops-grid,
.commandGrid,
.govGrid,
.intelGrid,
.cc,
.glassGrid,
.opsCenter,
.mission,
.darkExec{

display:grid!important;

grid-template-columns:
1fr 1fr!important;

gap:10px!important;

}

/* compact charts */

.trend,
.spark,
.wave{

height:90px!important;

}

.miniDonut{

width:110px!important;

height:110px!important;

}

.miniInner{

width:74px!important;

height:74px!important;

}

.ribbon{

height:82px!important;

padding:12px!important;

}

.ribbon h2{

font-size:30px!important;

}

.hero{

min-height:100px!important;

padding:20px!important;

}

/* collapse oversized blocks */

.card:has(.timeline),
.card:has(.calendar),
.card:has(.notifyFloat){

max-height:260px!important;

overflow:auto!important;

}

/* compact activity */

.feed,
.activityItem,
.note,
.notifyCard{

padding:8px!important;

margin-bottom:6px!important;

}

/* responsive */

@media(max-width:1200px){

.execRibbon{

grid-template-columns:
1fr 1fr!important;

}

.execAnalytics,
.ops-grid,
.commandGrid,
.govGrid,
.intelGrid,
.cc,
.glassGrid,
.opsCenter,
.mission,
.darkExec{

grid-template-columns:
1fr!important;

}

}

</style>


<style>

/* PACK169 */

.dashboard{

max-width:1920px!important;

padding:10px 16px!important;

}

.dashboard>*{

margin-bottom:8px!important;

}

/* HERO */

.hero{

min-height:90px!important;

padding:18px 26px!important;

border-radius:24px!important;

margin-bottom:12px!important;

}

.hero h1,
.hero h2{

font-size:38px!important;

margin:0!important;

}

/* KPI */

.execRibbon{

display:grid!important;

grid-template-columns:
repeat(4,1fr)!important;

gap:10px!important;

margin-bottom:12px!important;

}

.ribbon{

height:84px!important;

min-height:84px!important;

padding:12px 16px!important;

border-radius:20px!important;

}

.ribbon h2{

font-size:30px!important;

}

.ribbon small{

font-size:12px!important;

}

/* GLOBAL CARD */

.card,
.metric,
.metric-card,
.stat-card,
.exec-card,
.ops-card,
.command,
.gov,
.intel,
.ccCard,
.glass,
.opsPanel,
.missionCard,
.darkPanel{

padding:14px!important;

border-radius:18px!important;

min-height:auto!important;

}

/* FORCE 2 COL */

.execAnalytics,
.ops-grid,
.commandGrid,
.govGrid,
.intelGrid,
.cc,
.glassGrid,
.opsCenter,
.mission,
.darkExec{

display:grid!important;

grid-template-columns:
1fr 1fr!important;

gap:10px!important;

}

/* COMPACT TEXT */

h3,
h4,
.execTitle,
.opsTitle,
.govTitle,
.darkTitle{

font-size:17px!important;

margin-bottom:10px!important;

}

/* CHARTS */

.wave,
.spark,
.trend{

height:80px!important;

}

.progress{

height:8px!important;

}

/* ACTIVITY */

.feed,
.activityItem,
.notifyCard,
.note{

padding:8px!important;

margin-bottom:6px!important;

}

/* OVERFLOW */

.exec-card,
.ops-card,
.command,
.gov,
.intel,
.ccCard,
.glass,
.opsPanel{

max-height:340px!important;

overflow:auto!important;

}

/* FOOTER */

.execFooter{

gap:8px!important;

}

.foot{

padding:10px!important;

}

@media(max-width:1200px){

.execRibbon{

grid-template-columns:
1fr 1fr!important;

}

.execAnalytics,
.ops-grid,
.commandGrid,
.govGrid,
.intelGrid,
.cc,
.glassGrid,
.opsCenter,
.mission,
.darkExec{

grid-template-columns:
1fr!important;

}

}

</style>


<style>

/* PACK170 */

.execTabs{

margin-top:12px;

background:#fff;

border-radius:22px;

padding:14px;

box-shadow:
0 14px 40px rgba(15,23,42,.06);

}

.tabBar{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:14px;

}

.tabBtn{

padding:10px 18px;

border-radius:999px;

background:#eef4ff;

cursor:pointer;

font-weight:900;

transition:.2s;

}

.tabBtn.active{

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

color:#fff;

}

.tabContent{

display:none;

}

.tabContent.active{

display:block;

}

.tabGrid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}

.tabCard{

background:#f8fbff;

padding:16px;

border-radius:18px;

min-height:180px;

}

.tabCard h3{

font-size:18px;

margin-bottom:12px;

}

.miniBar{

height:10px;

background:#e5ecfa;

border-radius:999px;

overflow:hidden;

margin-bottom:14px;

}

.miniFill{

height:100%;

background:
linear-gradient(
90deg,
#2455ff,
#6a7fff
);

}

@media(max-width:1200px){

.tabGrid{

grid-template-columns:1fr;

}

}

</style>



<div class="execTabs">

<div class="tabBar">

<div class="tabBtn active"
data-tab="overview">

Overview

</div>

<div class="tabBtn"
data-tab="funnel">

Funnel

</div>

<div class="tabBtn"
data-tab="health">

Health

</div>

<div class="tabBtn"
data-tab="review">

Review

</div>

</div>



<div
class="tabContent active"
id="overview">

<div class="tabGrid">

<div class="tabCard">

<h3>

Conference Overview

</h3>

Acceptance

<div class="miniBar">

<div
class="miniFill"
style="
width:21%">

</div>

</div>

Review

<div class="miniBar">

<div
class="miniFill"
style="
width:84%">

</div>

</div>

</div>

<div class="tabCard">

<h3>

Status

</h3>

Workflow Active

<br><br>

Mail Healthy

<br><br>

Publish Ready

</div>

</div>

</div>



<div
class="tabContent"
id="funnel">

<div class="tabCard">

Submission Funnel

<br><br>

Submitted → Review → Decision

</div>

</div>



<div
class="tabContent"
id="health">

<div class="tabCard">

Health Score

<br><br>

98%

</div>

</div>



<div
class="tabContent"
id="review">

<div class="tabCard">

Reviewer Load

<br><br>

AI 84%

<br>

SE 66%

</div>

</div>

</div>



<script>

document
.querySelectorAll('.tabBtn')
.forEach(btn=>{

btn.onclick=()=>{

document
.querySelectorAll(
'.tabBtn'
)
.forEach(
x=>
x.classList.remove(
'active'
)
);

document
.querySelectorAll(
'.tabContent'
)
.forEach(
x=>
x.classList.remove(
'active'
)
);

btn.classList.add(
'active'
);

document
.getElementById(
btn.dataset.tab
)
.classList.add(
'active'
);

};

});

</script>


<style>

/* PACK172 */

:root{

--ok:#14b86d;
--warn:#f59e0b;
--blue:#2455ff;
--purple:#7c3aed;

}

.execRibbon{

gap:14px!important;

}

.ribbon{

position:relative;

height:150px!important;

overflow:hidden;

}

.ribbon::after{

content:'';

position:absolute;

right:-40px;

top:-40px;

width:140px;

height:140px;

background:

radial-gradient(
rgba(36,85,255,.12),
transparent
);

}

.ribbon h2{

font-size:52px!important;

margin-bottom:8px!important;

}

.ribbon small{

display:block;

font-size:18px!important;

}

.delta{

margin-top:8px;

display:inline-flex;

gap:8px;

padding:6px 12px;

border-radius:999px;

font-size:13px;

background:#eef6ff;

color:#2563eb;

font-weight:800;

}

.sparkline{

margin-top:14px;

height:8px;

border-radius:999px;

background:#e5ecfa;

overflow:hidden;

}

.sparkline span{

display:block;

height:100%;

background:

linear-gradient(
90deg,
#2455ff,
#4cc9f0
);

}

/* middle */

.execCenter{

display:grid;

grid-template-columns:
.8fr 1.2fr;

gap:16px;

margin-top:16px;

}

.livePanel{

background:#fff;

border-radius:24px;

padding:22px;

box-shadow:
0 12px 40px rgba(0,0,0,.06);

}

.liveItem{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid #edf2f7;

}

.liveDot{

width:12px;

height:12px;

border-radius:50%;

background:#22c55e;

}

/* workflow */

.flow{

display:flex!important;

flex-wrap:wrap;

gap:10px!important;

}

.flow div{

height:62px!important;

min-width:150px;

font-size:16px!important;

}

/* analytics */

.analyticsStrip{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:14px;

margin-top:14px;

}

.aCard{

background:#fff;

border-radius:18px;

padding:18px;

}

.aTitle{

font-size:14px;

color:#64748b;

}

.aVal{

font-size:30px;

font-weight:900;

color:#071126;

}

@media(max-width:1200px){

.execCenter,
.analyticsStrip{

grid-template-columns:
1fr!important;

}

}

</style>

<script>

document.addEventListener(
'DOMContentLoaded',
()=>{

document
.querySelectorAll(
'.ribbon'
)
.forEach(
(x,i)=>{

if(
!x.querySelector(
'.delta'
)
){

x.insertAdjacentHTML(

'beforeend',

`
<div class=delta>

↑ ${[27,18,13,9][i]||8}%

</div>

<div class=sparkline>

<span style="width:${[92,74,64,58][i]||50}%">

</span>

</div>

`

);

}

}

);

}

);

</script>


<style>

/* PACK173 */

.topDock{

position:sticky;

top:12px;

z-index:120;

display:flex;

justify-content:flex-end;

margin-bottom:14px;

pointer-events:none;

}

.topActions{

display:flex;

gap:10px;

pointer-events:auto;

}

.topBtn{

width:54px;

height:54px;

border:none;

border-radius:18px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:900;

color:#fff;

background:
linear-gradient(
135deg,
#061539,
#2455ff
);

box-shadow:
0 16px 45px rgba(36,85,255,.35);

transition:.25s;

}

.topBtn:hover{

transform:
translateY(-4px);

}

.chevronTop{

position:fixed;

right:24px;

bottom:26px;

width:62px;

height:62px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

font-weight:900;

color:#fff;

cursor:pointer;

z-index:999;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

box-shadow:
0 22px 60px rgba(0,0,0,.30);

opacity:0;

visibility:hidden;

transition:.25s;

}

.chevronTop.show{

opacity:1;

visibility:visible;

}

.chevronTop:hover{

transform:
translateY(-6px);

}

.dashboard{

scroll-behavior:smooth;

}

</style>


<div class="topDock">

<div class="topActions">

<button
class="topBtn"
title="Dashboard">

⌂

</button>

<button
class="topBtn"
title="Refresh"
onclick="location.reload()">

↻

</button>

</div>

</div>


<div
id="dashChevron"
class="chevronTop"
title="Back To Top">

⌃

</div>


<script>

const btn=
document.getElementById(
'dashChevron'
);

window.addEventListener(
'scroll',
()=>{

if(
window.scrollY>250
){

btn.classList.add(
'show'
);

}else{

btn.classList.remove(
'show'
);

}

}
);

btn.onclick=()=>{

window.scrollTo({

top:0,

behavior:'smooth'

});

};

</script>


<style>

/* PACK174 */

.execFloat{

position:fixed;

right:26px;

bottom:26px;

display:flex;

flex-direction:column;

gap:12px;

z-index:999999;

}

.floatBtn{

width:62px;

height:62px;

border:none;

border-radius:20px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

background:
linear-gradient(
135deg,
#071126,
#2455ff
);

box-shadow:
0 18px 60px rgba(0,0,0,.25);

opacity:0;

transform:
translateY(20px);

pointer-events:none;

transition:.25s;

}

.floatBtn.show{

opacity:1;

transform:none;

pointer-events:auto;

}

.floatBtn:hover{

transform:
translateY(-4px);

}

.floatMini{

width:52px;

height:52px;

font-size:20px;

background:
linear-gradient(
135deg,
#2455ff,
#4f7cff
);

}

</style>


<div class="execFloat">

<button
id="goTop"
class="floatBtn"
title="Back to top">

⌃

</button>



</div>


<script>

(function(){

const topBtn=
document.getElementById(
'goTop'
);

const heroBtn=
document.getElementById(
);

const root=

document.querySelector(
'.dashboard'
)

||

document.querySelector(
'main'
)

||

document.scrollingElement

||

document.body;

function currentScroll(){

return root.scrollTop
||
window.scrollY
||
0;

}

function show(){

if(currentScroll()>260){

topBtn.classList.add(
'show'
);

heroBtn.classList.add(
'show'
);

}else{

topBtn.classList.remove(
'show'
);

heroBtn.classList.remove(
'show'
);

}

}

root.addEventListener(
'scroll',
show
);

window.addEventListener(
'scroll',
show
);

show();

topBtn.onclick=function(){

root.scrollTo({

top:0,

behavior:'smooth'

});

window.scrollTo({

top:0,

behavior:'smooth'

});

};

heroBtn.onclick=function(){

const hero=

document.querySelector(
'.hero'
)

||

document.body;

hero.scrollIntoView({

behavior:'smooth'

});

};

})();

</script>


<style>

/* PACK175 */

.workspacePolish{

display:flex;

justify-content:space-between;

align-items:center;

gap:14px;

margin:8px 0 14px;

padding:12px 16px;

border-radius:20px;

background:rgba(255,255,255,.82);

box-shadow:0 12px 36px rgba(15,23,42,.06);

}

.breadcrumbMini{

display:flex;

gap:8px;

align-items:center;

font-weight:900;

color:#071126;

}

.breadcrumbMini span{

padding:8px 12px;

border-radius:999px;

background:#eef4ff;

color:#2455ff;

}

.scopeMini{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.scopeChip{

padding:9px 14px;

border-radius:999px;

font-weight:900;

background:#ecfdf5;

color:#059669;

}

.scopeChip.blue{

background:#eef4ff;

color:#2455ff;

}

.scopeChip.warn{

background:#fff8e8;

color:#d97706;

}

a[href="/easychair/admin/dashboard"],
a[href*="admin/dashboard"]{

box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);

}

a[href="/easychair/admin/dashboard"] i,
a[href*="admin/dashboard"] i{

color:#60a5fa!important;

}

</style>

<div class="workspacePolish">

<div class="breadcrumbMini">

<span>Dashboard</span>

<i class="fa fa-chevron-left"></i>

Conference Workspace

</div>

<div class="scopeMini">

<div class="scopeChip">
● Active
</div>

<div class="scopeChip blue">
ETCEA-2026
</div>

<div class="scopeChip warn">
2 Pending
</div>

</div>

</div>


<style>

/* PACK175 */

.workspacePolish{

display:flex;

justify-content:space-between;

align-items:center;

gap:14px;

margin:8px 0 14px;

padding:12px 16px;

border-radius:20px;

background:rgba(255,255,255,.82);

box-shadow:0 12px 36px rgba(15,23,42,.06);

}

.breadcrumbMini{

display:flex;

gap:8px;

align-items:center;

font-weight:900;

color:#071126;

}

.breadcrumbMini span{

padding:8px 12px;

border-radius:999px;

background:#eef4ff;

color:#2455ff;

}

.scopeMini{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.scopeChip{

padding:9px 14px;

border-radius:999px;

font-weight:900;

background:#ecfdf5;

color:#059669;

}

.scopeChip.blue{

background:#eef4ff;

color:#2455ff;

}

.scopeChip.warn{

background:#fff8e8;

color:#d97706;

}

a[href="/easychair/admin/dashboard"],
a[href*="admin/dashboard"]{

box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);

}

a[href="/easychair/admin/dashboard"] i,
a[href*="admin/dashboard"] i{

color:#60a5fa!important;

}

.ec-enterprise-control{
padding:30px;
border-radius:24px;
background:
linear-gradient(
135deg,
#0f172a,
#1e293b,
#2563eb
);
}

.ec-enterprise-tile{
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
border-radius:22px;
padding:28px;
text-align:center;
color:#fff;
height:100%;
transition:.25s;
}

.ec-enterprise-tile:hover{
transform:translateY(-6px);
box-shadow:
0 20px 50px rgba(0,0,0,.18);
}

.ec-enterprise-tile i{
font-size:30px;
margin-bottom:12px;
}

.ec-enterprise-tile h3{
font-size:34px;
font-weight:900;
margin:0;
}

.ec-enterprise-tile span{
opacity:.85;
font-size:14px;
}

@media(max-width:768px){

.ec-enterprise-tile{
padding:18px;
}

.ec-enterprise-tile h3{
font-size:24px;
}

}

</style>

<div class="workspacePolish">

<div class="breadcrumbMini">

<span>Dashboard</span>

<i class="fa fa-chevron-left"></i>

Conference Workspace

</div>

<div class="scopeMini">

<div class="scopeChip">
● Active
</div>

<div class="scopeChip blue">
ETCEA-2026
</div>

<div class="scopeChip warn">
2 Pending
</div>

</div>

</div>

