/* =========================================================
   PT Metal Multi Energi - Premium Dashboard Theme Patch
   Upload: assets/dashboard-premium.css
   Add in admin/header.php after style.css:
   <link rel="stylesheet" href="../assets/dashboard-premium.css?v=20260620">
   ========================================================= */

:root{
  --mme-navy:#0b2447;
  --mme-blue:#14549a;
  --mme-cyan:#13c4ee;
  --mme-gold:#f4c766;
  --mme-green:#21c38b;
  --mme-purple:#6c63ff;
  --mme-red:#ef476f;
  --mme-glass:rgba(255,255,255,.76);
  --mme-line:rgba(148,163,184,.22);
  --mme-shadow:0 22px 60px rgba(12,35,72,.16);
}

body{
  background:
    radial-gradient(circle at 8% 12%, rgba(19,196,238,.20), transparent 24%),
    radial-gradient(circle at 90% 22%, rgba(244,199,102,.16), transparent 22%),
    linear-gradient(135deg,#eaf2f9 0%,#f7fbff 46%,#edf5fb 100%) !important;
  min-height:100vh;
}

/* Topbar lebih premium */
.topbar{
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(135deg,#0a2448 0%,#123f78 48%,#0e2d58 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(8,27,54,.28) !important;
}
.topbar-inner{
  max-width:1400px !important;
  padding:14px 22px !important;
}
.brand-badge{
  background:linear-gradient(135deg,#ffffff,#d8f6ff) !important;
  color:#0f4076 !important;
  box-shadow:0 12px 32px rgba(19,196,238,.24), inset 0 0 0 1px rgba(255,255,255,.85) !important;
}
.brand-title{
  letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.12);
}
.nav-pills a{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.nav-pills a:before{
  content:"";
  position:absolute;
  left:-60%;
  top:0;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg);
  transition:.45s ease;
}
.nav-pills a:hover:before,
.nav-pills a.active:before{left:115%}
.nav-pills a.active{
  background:linear-gradient(135deg,#19c8f3,#238be6) !important;
  box-shadow:0 12px 26px rgba(19,196,238,.35) !important;
}
.nav-pills a[href*="logout"]{
  background:rgba(239,71,111,.10);
}
.nav-pills a[href*="logout"]:hover{
  background:linear-gradient(135deg,#ef476f,#ff7b7b) !important;
}

/* Bungkus dashboard */
.wrap{
  max-width:1320px !important;
}

/* Hero command center */
.dash-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px !important;
  padding:30px 32px !important;
  background:
    radial-gradient(circle at 82% 20%, rgba(19,196,238,.28), transparent 25%),
    radial-gradient(circle at 18% 90%, rgba(244,199,102,.18), transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(237,248,255,.88)) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:var(--mme-shadow) !important;
}
.dash-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(20,84,154,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(20,84,154,.06) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.22),transparent 70%);
  pointer-events:none;
}
.dash-hero:after{
  content:"MME";
  position:absolute;
  right:36px;
  bottom:-18px;
  font-size:100px;
  font-weight:900;
  letter-spacing:-8px;
  color:rgba(20,84,154,.055);
  pointer-events:none;
}
.dash-hero h1{
  color:#08213f !important;
  font-size:38px !important;
  line-height:1.05 !important;
  max-width:830px;
}
.dash-hero p{
  color:#52677d !important;
  font-size:16px;
}
.hero-chip{
  background:linear-gradient(135deg,rgba(19,196,238,.20),rgba(244,199,102,.15)) !important;
  border:1px solid rgba(19,196,238,.32) !important;
  color:#0d4c88 !important;
  box-shadow:0 8px 18px rgba(19,196,238,.12);
}
.dash-hero-actions .btn{
  border-radius:16px !important;
  box-shadow:0 15px 32px rgba(19,196,238,.22);
}

/* Card statistik lebih hidup */
.stats-android,
.stats-six{
  gap:18px !important;
}
.stat-card{
  position:relative;
  overflow:hidden;
  min-height:158px;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 18px 42px rgba(15,49,86,.10) !important;
  transition:transform .22s ease, box-shadow .22s ease;
}
.stat-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 55px rgba(15,49,86,.16) !important;
}
.stat-card:before{
  position:absolute;
  right:15px;
  top:12px;
  font-size:46px;
  opacity:.16;
  font-weight:900;
}
.stat-card:nth-child(1){background:linear-gradient(135deg,#ffffff,#e8f4ff) !important}
.stat-card:nth-child(1):before{content:"🧾"}
.stat-card:nth-child(2){background:linear-gradient(135deg,#ffffff,#eafaf3) !important}
.stat-card:nth-child(2):before{content:"👥"}
.stat-card:nth-child(3){background:linear-gradient(135deg,#ffffff,#eef0ff) !important}
.stat-card:nth-child(3):before{content:"🤝"}
.stat-card:nth-child(4){background:linear-gradient(135deg,#ffffff,#e8fbff) !important}
.stat-card:nth-child(4):before{content:"📦"}
.stat-card:nth-child(5){background:linear-gradient(135deg,#ffffff,#fff8e5) !important}
.stat-card:nth-child(5):before{content:"📁"}
.stat-card:nth-child(6){background:linear-gradient(135deg,#ffffff,#eafff5) !important}
.stat-card:nth-child(6):before{content:"✅"}
.stat-card.accent{
  background:linear-gradient(135deg,#dffaff,#bff1ff 45%,#f8feff) !important;
  border-color:rgba(19,196,238,.28) !important;
}
.stat-card.accent:before{content:"💰"}
.stat-card span{
  color:#38506b !important;
  letter-spacing:1px !important;
}
.stat-card b{
  color:#104984 !important;
  letter-spacing:-.5px;
}

/* Update cards */
.updates-grid{
  gap:18px !important;
}
.update-card{
  position:relative;
  overflow:hidden;
  padding:22px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 18px 40px rgba(11,40,80,.10) !important;
}
.update-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--mme-blue),var(--mme-cyan));
}
.update-card:nth-child(2):before{background:linear-gradient(90deg,#21c38b,#96e6c3)}
.update-card:nth-child(3):before{background:linear-gradient(90deg,#6c63ff,#b3a7ff)}
.update-card:nth-child(4):before{background:linear-gradient(90deg,#f4c766,#ff9f43)}
.update-card:nth-child(5):before{background:linear-gradient(90deg,#ef476f,#ff9ab2)}
.update-head{
  margin-bottom:14px !important;
}
.update-head h2{
  color:#172b46 !important;
  font-size:18px !important;
}
.update-head a{
  background:#eaf6ff;
  color:#0f4a83 !important;
  padding:7px 11px;
  border-radius:999px;
}
.mini-list{
  gap:11px !important;
}
.mini-item{
  position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,250,255,.90)) !important;
  border:1px solid rgba(210,226,242,.95) !important;
  border-radius:18px !important;
  padding:14px 14px 14px 17px !important;
  transition:.2s ease;
}
.mini-item:hover{
  transform:translateX(4px);
  box-shadow:0 14px 30px rgba(20,84,154,.12);
}
.mini-item:before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:0 8px 8px 0;
  background:var(--mme-cyan);
}
.mini-item b{
  color:#123f74 !important;
  font-size:15px;
}
.mini-item .small{
  color:#64758b !important;
  line-height:1.45;
}

/* Grafik dan quick action */
.chart-wrap{
  background:
    radial-gradient(circle at 100% 0%,rgba(19,196,238,.13),transparent 32%),
    linear-gradient(180deg,#ffffff,#f5fbff) !important;
  border:1px solid rgba(210,226,242,.95) !important;
  border-radius:22px !important;
}
.card{
  border-color:rgba(255,255,255,.75) !important;
}
.card h2{
  color:#102a43;
}

/* Tombol */
.btn-dark{
  background:linear-gradient(135deg,#14549a,#13c4ee) !important;
  box-shadow:0 15px 30px rgba(19,196,238,.20) !important;
}
.btn-soft{
  background:#eaf6ff !important;
  color:#104984 !important;
}

/* Responsive */
@media(max-width:1200px){
  .dash-hero h1{font-size:32px !important}
}
@media(max-width:700px){
  .dash-hero{padding:22px !important}
  .dash-hero h1{font-size:26px !important}
  .stat-card{min-height:auto}
}

/* Print jangan ikut tema dashboard */
@media print{
  .dash-hero,.stats-android,.stats-six,.updates-grid{box-shadow:none!important}
}


/* NAV MOBILE PREMIUM FIX */
.nav-mobile-toggle:hover{background:rgba(255,255,255,.20)}
@media(max-width:860px){.nav-pills{gap:8px!important}.nav-dropdown{width:100%}.nav-dropdown-menu{background:rgba(255,255,255,.95)!important}.updates-grid{grid-template-columns:1fr!important}.stats-six{grid-template-columns:1fr!important}}