/* V216 - Dashboard visual redesign.
   UI-only, fully scoped under .dashboard-v216 so nothing else in the
   app is affected. No routes, permissions, data, or workflow logic
   are touched here — only presentation of values already rendered
   by templates/dashboard.html. */

.dashboard-v216{
  --dv216-ink:#0f172a;
  --dv216-muted:#64748b;
  --dv216-line:#e6ebf2;
  --dv216-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -24px rgba(15,23,42,.28);
}

/* -------------------------------------------------------------------
   Header
   ------------------------------------------------------------------- */
.dashboard-v216 .dv216-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:20px;
  margin-bottom:22px;
  border-bottom:1px solid var(--dv216-line);
}

.dashboard-v216 .dv216-header-text h1{
  margin:0;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--dv216-ink);
}

.dashboard-v216 .dv216-header-text .muted{
  margin-top:6px;
  font-size:14px;
}

.dashboard-v216 .dv216-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-v216 .dv216-header-actions .btn{
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}

.dashboard-v216 .dv216-primary-btn{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  box-shadow:0 10px 22px -6px rgba(37,99,235,.45);
}

.dashboard-v216 .dv216-primary-btn:hover{
  background:linear-gradient(135deg,#1d4ed8,#1e40af);
}

@media(max-width:640px){
  .dashboard-v216 .dv216-header-actions{
    width:100%;
  }
  .dashboard-v216 .dv216-header-actions .btn{
    flex:1 1 auto;
    text-align:center;
  }
}

/* -------------------------------------------------------------------
   KPI cards
   ------------------------------------------------------------------- */
.dashboard-v216 .dv216-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:26px;
}

.dashboard-v216 .dv216-kpi{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  min-width:0;
  padding:22px 20px;
  background:#ffffff;
  border:1px solid var(--dv216-line);
  border-radius:18px;
  box-shadow:var(--dv216-shadow);
  overflow:hidden;
  isolation:isolate;
}

.dashboard-v216 .dv216-kpi::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--dv216-accent-1,#2563eb),var(--dv216-accent-2,#60a5fa));
}

.dashboard-v216 .dv216-kpi::after{
  content:"";
  position:absolute;
  right:-30px;
  top:-30px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle,var(--dv216-accent-1,#2563eb) 0%,transparent 70%);
  opacity:.08;
  z-index:-1;
}

.dashboard-v216 .dv216-kpi-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:14px;
  font-size:22px;
  background:var(--dv216-icon-bg,#eef4ff);
}

.dashboard-v216 .dv216-kpi-body{
  min-width:0;
}

.dashboard-v216 .dv216-kpi-body .muted{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--dv216-muted);
}

.dashboard-v216 .dv216-kpi-body .stat{
  margin-top:6px;
  font-size:34px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--dv216-ink);
  font-variant-numeric:tabular-nums;
}

.dashboard-v216 .dv216-kpi-contracts{
  --dv216-accent-1:#2563eb;
  --dv216-accent-2:#60a5fa;
  --dv216-icon-bg:#eaf1ff;
}

.dashboard-v216 .dv216-kpi-total{
  --dv216-accent-1:#0ea5e9;
  --dv216-accent-2:#67e8f9;
  --dv216-icon-bg:#e6f8ff;
}

.dashboard-v216 .dv216-kpi-completed{
  --dv216-accent-1:#16a34a;
  --dv216-accent-2:#86efac;
  --dv216-icon-bg:#eafbf0;
}

.dashboard-v216 .dv216-kpi-overdue{
  --dv216-accent-1:#dc2626;
  --dv216-accent-2:#fca5a5;
  --dv216-icon-bg:#fef0f0;
  background:linear-gradient(180deg,#fffbfb,#ffffff 55%);
  border-color:#f6d9d9;
}

.dashboard-v216 .dv216-kpi-overdue .stat{
  color:#b91c1c;
}

@media(max-width:640px){
  .dashboard-v216 .dv216-kpi{
    padding:18px 16px;
  }
  .dashboard-v216 .dv216-kpi-body .stat{
    font-size:28px;
  }
}

/* -------------------------------------------------------------------
   Lower sections: panels
   ------------------------------------------------------------------- */
.dashboard-v216 .dv216-panels-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
}

.dashboard-v216 .dv216-panel{
  min-width:0;
  padding:22px;
  background:#ffffff;
  border:1px solid var(--dv216-line);
  border-radius:18px;
  box-shadow:var(--dv216-shadow);
}

.dashboard-v216 .dv216-panel-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-size:16px;
}

.dashboard-v216 .dv216-panel-title::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:9px;
  font-size:14px;
  background:#eef4ff;
}

.dashboard-v216 .dv216-icon-status::before{ content:"📊"; }
.dashboard-v216 .dv216-icon-mail::before{ content:"✉️"; background:#eefaf0; }
.dashboard-v216 .dv216-icon-scope::before{ content:"🧾"; }

/* Status breakdown list (replaces the plain table, same data/labels) */
.dashboard-v216 .dv216-status-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dashboard-v216 .dv216-status-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px 14px;
  padding:10px 4px;
  border-bottom:1px solid #f1f5f9;
}

.dashboard-v216 .dv216-status-row:last-child{
  border-bottom:0;
}

.dashboard-v216 .dv216-status-count{
  font-weight:800;
  font-size:15px;
  color:var(--dv216-ink);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.dashboard-v216 .dv216-bar{
  grid-column:1/-1;
  display:block;
  height:6px;
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
}

.dashboard-v216 .dv216-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#60a5fa);
  font-style:normal;
}

/* Email Gateway mini stats */
.dashboard-v216 .dv216-mini-stats{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}

.dashboard-v216 .dv216-mini-stat{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  background:#f8fafc;
  font-size:14px;
  color:var(--dv216-ink);
}

.dashboard-v216 .dv216-mini-stat-warn{
  background:#fef6f0;
}

.dashboard-v216 .dv216-mini-icon{
  font-size:16px;
}

@media(max-width:640px){
  .dashboard-v216 .dv216-panel{
    padding:18px;
  }
}