/* =====================================================
   ERP GGN — Dashboard Styles
   File: css/dashboard.css
   ===================================================== */

:root{
  --ggn-navy:#0A2540; --ggn-blue:#1B4B7E; --ggn-sky:#3E7CB1;
  --ggn-gold:#C9A227; --ggn-amber:#E8B33D;
  --ggn-light:#F5F7FA; --ggn-grey:#64748B;
  --ggn-success:#16A34A; --ggn-warning:#EA580C; --ggn-danger:#DC2626;
  --ggn-icon-idle:#94A3B8;
  --ggn-icon-mid:#64748B;
  --ggn-icon-active:#3E7CB1;
  --ggn-icon-active-strong:#0A2540;
}
*{ -webkit-tap-highlight-color:transparent; }
body{
  font-family:'Inter','SF Pro Display',-apple-system,system-ui,sans-serif;
  background:#F5F7FA;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  margin:0;
}

/* ============ SPLASH ============ */
.splash-screen{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(160deg,#0A2540 0%,#1B4B7E 55%,#3E7CB1 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; transition:opacity .6s ease;
}
.splash-screen.hide{ opacity:0; pointer-events:none; }
.splash-logo{
  width:100px; height:100px; border-radius:24px;
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 60px rgba(201,162,39,.4);
  font-size:46px; font-weight:800; color:#0A2540;
  animation:pop .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.splash-title{ margin-top:20px; font-size:22px; font-weight:800; }
.splash-sub{ margin-top:6px; font-size:13px; opacity:.75; }
.splash-loader{
  margin-top:36px; width:40px; height:40px;
  border:3px solid rgba(255,255,255,.15); border-top-color:#C9A227;
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar-ggn{
  background:#0A2540 !important;
  border-bottom:none !important;
  box-shadow:0 2px 12px rgba(10,37,64,.18);
  position:fixed; top:0; left:0; right:0; z-index:100;
}
.navbar-ggn::after{ display:none !important; }
.navbar-ggn .navbar-inner{
  padding:0 8px;
  display:flex;
  align-items:center;
  height:56px;
  gap:8px;
}
.navbar-brand{
  display:flex; align-items:center; gap:8px;
  color:#fff; flex:1;
}
.brand-logo{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#0A2540;
  letter-spacing:-.5px;
  box-shadow:0 3px 8px rgba(201,162,39,.35);
  flex-shrink:0;
}
.brand-text{
  display:flex; flex-direction:column; line-height:1.05;
}
.brand-text strong{
  font-size:15px; font-weight:800; letter-spacing:-.3px;
}
.brand-text small{
  font-size:8px; font-weight:700; letter-spacing:.4px;
  opacity:.65; margin-top:2px; text-transform:uppercase;
}

.nav-tools{
  display:flex; align-items:center; gap:0;
}
.nav-tool{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7);
  background:transparent;
  border:none;
  cursor:pointer;
  transition:background .2s, color .2s;
  position:relative;
}
.nav-tool:hover, .nav-tool:active{
  background:rgba(62,124,177,.25);
  color:#3E7CB1;
}
.nav-tool svg{
  width:20px; height:20px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.nav-tool .dot{
  position:absolute; top:8px; right:8px;
  width:7px; height:7px; border-radius:50%;
  background:#C9A227; border:1.5px solid #0A2540;
}
.online-dot{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
}
.online-dot span{
  width:9px; height:9px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 8px #22C55E, 0 0 0 3px rgba(34,197,94,.2);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}

/* =====================================================
   PAGE CONTENT
   ===================================================== */
.page-content{
  padding-top:56px;
  padding-bottom:76px;
  min-height:100vh;
}

/* =====================================================
   HERO BANNER
   ===================================================== */
.hero-banner{
  margin:12px 14px 0; border-radius:20px; padding:20px;
  background:linear-gradient(135deg,#0A2540 0%,#1B4B7E 60%,#3E7CB1 100%);
  color:#fff; box-shadow:0 8px 24px rgba(10,37,64,.28);
  position:relative; overflow:hidden;
}
.hero-banner::after{
  content:''; position:absolute; top:-50px; right:-50px;
  width:180px; height:180px;
  background:radial-gradient(circle,rgba(201,162,39,.45),transparent 65%);
  border-radius:50%;
}
.hero-content{ position:relative; z-index:1; }
.hero-greeting{ font-size:12px; opacity:.85; }
.hero-name{ font-size:22px; font-weight:800; margin-top:4px; letter-spacing:-.5px; }
.hero-meta{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.hero-badge{
  padding:4px 11px; border-radius:20px;
  font-size:10px; font-weight:800; letter-spacing:.3px;
}
.hero-badge.gold{
  background:rgba(201,162,39,.28);
  border:1px solid rgba(201,162,39,.7);
  color:#E8B33D;
}
.hero-badge.live{
  background:rgba(22,163,74,.28);
  border:1px solid rgba(22,163,74,.6);
  color:#4ADE80;
  display:flex; align-items:center; gap:5px;
}
.hero-badge.live::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#4ADE80; animation:pulse 1.5s infinite;
}
.hero-stats{
  display:flex; gap:14px; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.15);
  position:relative; z-index:1;
}
.hero-stat{ flex:1; }
.hero-stat-val{ font-size:18px; font-weight:800; letter-spacing:-.4px; }
.hero-stat-lbl{ font-size:10px; opacity:.7; margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
.hero-divider{ width:1px; background:rgba(255,255,255,.15); }

/* =====================================================
   SECTION
   ===================================================== */
.svc-section{ padding:14px 8px 0; }
.svc-title-wrap{
  padding:8px 6px;
  display:flex; align-items:center; justify-content:space-between;
}
.svc-title{
  font-size:15px; font-weight:800; color:#0A2540;
  letter-spacing:-.3px;
}
.svc-link{
  font-size:11px; font-weight:700; color:#3E7CB1;
  text-decoration:none;
}

/* =====================================================
   SERVICES GRID
   ===================================================== */
.svc-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:6px; padding:6px 0;
}
.svc-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px; border-radius:14px;
  transition:background .15s;
  cursor:pointer;
}
.svc-item:active{ background:rgba(10,37,64,.05); }
.svc-icon{
  width:50px; height:50px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; position:relative;
  box-shadow:0 4px 12px rgba(10,37,64,.15);
}
.svc-icon.navy{ background:linear-gradient(135deg,#0A2540,#1B4B7E); }
.svc-icon.blue{ background:linear-gradient(135deg,#1B4B7E,#3E7CB1); }
.svc-icon.gold{ background:linear-gradient(135deg,#C9A227,#E8B33D); }
.svc-icon.green{ background:linear-gradient(135deg,#16A34A,#22C55E); }
.svc-icon.purple{ background:linear-gradient(135deg,#7C3AED,#A78BFA); }
.svc-icon.red{ background:linear-gradient(135deg,#DC2626,#F87171); }
.svc-icon.sky{ background:linear-gradient(135deg,#0EA5E9,#38BDF8); }
.svc-icon.amber{ background:linear-gradient(135deg,#EA580C,#FB923C); }
.svc-label{
  font-size:10px; font-weight:700; color:#0A2540;
  text-align:center; line-height:1.25; max-width:72px;
}
.svc-icon .badge{
  position:absolute; top:-4px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:10px; background:#DC2626; color:#fff;
  font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #F5F7FA;
}

/* =====================================================
   PROMO GRID
   ===================================================== */
.promo-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:8px 6px;
}
.promo-card{
  border-radius:18px; padding:16px;
  position:relative; overflow:hidden;
  min-height:140px; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 4px 14px rgba(10,37,64,.12);
}
.promo-card.navy{ background:linear-gradient(135deg,#0A2540,#1B4B7E); }
.promo-card.gold{ background:linear-gradient(135deg,#C9A227,#E8B33D); color:#0A2540; }
.promo-card.sky{ background:linear-gradient(135deg,#1B4B7E,#3E7CB1); }
.promo-card.green{ background:linear-gradient(135deg,#16A34A,#22C55E); }

.promo-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:4px;
}
.promo-icon{
  font-size:32px; line-height:1; margin-bottom:6px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}
.promo-watermark{
  position:absolute; top:-15px; right:-15px;
  width:130px; height:130px;
  pointer-events:none; z-index:1;
  transform:rotate(-8deg); opacity:.9;
}
.promo-title{ font-size:14px; font-weight:800; letter-spacing:-.2px; }
.promo-sub{ font-size:10.5px; opacity:.9; margin-top:2px; }

/* =====================================================
   STAT SCROLL
   ===================================================== */
.stat-scroll{
  display:flex; gap:10px; padding:8px 6px;
  overflow-x:auto; scrollbar-width:none;
}
.stat-scroll::-webkit-scrollbar{ display:none; }
.stat-box{
  flex-shrink:0; min-width:140px;
  background:#fff; border-radius:16px; padding:14px;
  box-shadow:0 3px 12px rgba(10,37,64,.07);
  border:1px solid rgba(10,37,64,.04);
  position:relative; overflow:hidden;
}
.stat-box::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:#C9A227;
}
.stat-box.blue::before{ background:#3E7CB1; }
.stat-box.green::before{ background:#16A34A; }
.stat-box.red::before{ background:#DC2626; }
.stat-box-lbl{
  font-size:9.5px; color:#64748B;
  text-transform:uppercase; letter-spacing:.6px; font-weight:700;
}
.stat-box-val{
  font-size:18px; font-weight:800; color:#0A2540;
  margin-top:5px; letter-spacing:-.5px;
}
.stat-box-sub{
  font-size:10px; margin-top:3px;
  color:#16A34A; font-weight:700;
}
.stat-box-sub.warn{ color:#EA580C; }

/* =====================================================
   ACTIVITY LIST
   ===================================================== */
.act-list{ padding:8px 6px 20px; }
.act-item{
  background:#fff; border-radius:16px; padding:14px;
  margin-bottom:10px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 3px 12px rgba(10,37,64,.06);
  transition:transform .15s;
}
.act-item:active{ transform:scale(.98); }
.act-icon{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 3px 8px rgba(10,37,64,.1);
}
.act-icon.navy{ background:linear-gradient(135deg,#0A2540,#1B4B7E); color:#fff; }
.act-icon.gold{ background:linear-gradient(135deg,#C9A227,#E8B33D); color:#0A2540; }
.act-icon.green{ background:linear-gradient(135deg,#16A34A,#22C55E); color:#fff; }
.act-icon.blue{ background:linear-gradient(135deg,#1B4B7E,#3E7CB1); color:#fff; }
.act-body{ flex:1; min-width:0; }
.act-title{
  font-size:13.5px; font-weight:800; color:#0A2540;
  letter-spacing:-.2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.act-sub{ font-size:11px; color:#64748B; margin-top:3px; }
.act-right{ text-align:right; flex-shrink:0; }
.act-amount{ font-size:12.5px; font-weight:800; color:#0A2540; }
.act-badge{
  display:inline-block; margin-top:4px;
  padding:2px 8px; border-radius:20px;
  font-size:9px; font-weight:800;
  text-transform:uppercase; letter-spacing:.4px;
}
.badge-deal{ background:#DCFCE7; color:#166534; }
.badge-sent{ background:#DBEAFE; color:#1E40AF; }
.badge-rev{ background:#FEF3C7; color:#92400E; }
.badge-pend{ background:#FFEDD5; color:#9A3412; }

/* =====================================================
   BOTTOM TABBAR (Dinamis dari DB)
   ===================================================== */
.tabbar-ggn{
  background:#FFFFFF !important;
  border-top:1px solid rgba(10,37,64,.08) !important;
  box-shadow:0 -2px 12px rgba(10,37,64,.06);
  height:64px !important;
  position:fixed; bottom:0; left:0; right:0; z-index:100;
}
.tabbar-ggn .toolbar-inner{
  height:64px !important; padding:0 !important;
  display:flex;
}
.tabbar-ggn .tab-link{
  flex:1;
  color:var(--ggn-icon-idle) !important;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:3px; padding:6px 0;
  transition:color .2s;
  position:relative;
  background:transparent;
  border:none;
  cursor:pointer;
  text-decoration:none;
}
.tabbar-ggn .tab-link svg{
  width:24px; height:24px;
  stroke:currentColor; fill:none;
  stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s, stroke .2s;
}
.tabbar-ggn .tab-link .tabbar-label{
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:-.1px;
  transition:color .2s, font-weight .2s;
}
.tabbar-ggn .tab-link:hover{ color:var(--ggn-icon-mid) !important; }
.tabbar-ggn .tab-link.active{ color:var(--ggn-icon-active) !important; }
.tabbar-ggn .tab-link.active svg{
  transform:translateY(-2px) scale(1.05);
  stroke-width:2.4;
}
.tabbar-ggn .tab-link.active .tabbar-label{
  color:var(--ggn-icon-active-strong) !important;
  font-weight:800 !important;
}
.tabbar-ggn .tab-link::before{
  content:''; position:absolute; top:0;
  left:50%; transform:translateX(-50%);
  width:0; height:3px; background:#C9A227;
  border-radius:0 0 3px 3px;
  transition:width .25s;
}
.tabbar-ggn .tab-link.active::before{ width:32px; }
.tab-badge-new{
  position:absolute; top:4px; right:calc(50% - 18px);
  min-width:16px; height:16px; padding:0 4px;
  background:#DC2626; color:#fff;
  font-size:9px; font-weight:800;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

/* =====================================================
   DRAWER (Sidebar)
   ===================================================== */
.drawer-backdrop{
  position:fixed; inset:0; z-index:999;
  background:rgba(10,37,64,.6);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; left:0; bottom:0;
  width:300px; max-width:85vw;
  background:linear-gradient(165deg,#0A2540 0%,#1B4B7E 70%,#0A2540 100%);
  z-index:1000;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.drawer.open{ transform:translateX(0); }

.drawer-header{
  padding:34px 20px 20px;
  color:#fff; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-header::after{
  content:''; position:absolute; top:-40px; right:-40px;
  width:140px; height:140px;
  background:radial-gradient(circle,rgba(201,162,39,.3),transparent 70%);
  border-radius:50%;
}
.drawer-avatar{
  width:56px; height:56px; border-radius:18px;
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:#0A2540;
  box-shadow:0 10px 24px rgba(201,162,39,.35);
  position:relative; z-index:1;
  text-transform:uppercase;
}
.drawer-name{
  font-size:16px; font-weight:800;
  margin-top:12px; position:relative; z-index:1;
}
.drawer-role{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; opacity:.85;
  margin-top:4px; position:relative; z-index:1;
  padding:3px 10px;
  background:rgba(255,255,255,.1);
  border-radius:20px;
}
.drawer-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.1);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  z-index:2;
}
.drawer-close:hover{ background:rgba(255,255,255,.2); }
.drawer-close svg{
  width:18px; height:18px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.drawer-menu{
  flex:1; overflow-y:auto;
  padding:12px 0 20px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
.drawer-menu::-webkit-scrollbar{ width:4px; }
.drawer-menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);
  border-radius:2px;
}

.drawer-section-title{
  font-size:10px; color:rgba(255,255,255,.4);
  text-transform:uppercase; letter-spacing:1.2px;
  font-weight:800;
  padding:14px 24px 6px;
}
.drawer-item{
  display:flex; align-items:center; gap:14px;
  padding:11px 16px; margin:0 8px;
  border-radius:12px;
  color:rgba(255,255,255,.85);
  font-size:13.5px; font-weight:600;
  cursor:pointer;
  transition:background .2s;
  text-decoration:none;
  border:none; background:transparent;
  width:calc(100% - 16px);
  text-align:left;
  font-family:inherit;
}
.drawer-item:hover{ background:rgba(255,255,255,.08); }
.drawer-item.active{
  background:rgba(201,162,39,.2);
  color:#E8B33D;
}
.drawer-item-icon{
  width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  background:rgba(255,255,255,.1);
  flex-shrink:0;
}
.drawer-item.active .drawer-item-icon{
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  color:#0A2540;
}
.drawer-item-count{
  margin-left:auto;
  font-size:10px; padding:2px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  font-weight:700;
}
.drawer-footer{
  padding:14px 20px;
  font-size:10px; color:rgba(255,255,255,.4);
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.drawer-footer strong{
  color:rgba(201,162,39,.9);
}
.drawer-logout{
  display:flex; align-items:center; gap:14px;
  padding:11px 16px; margin:8px;
  border-radius:12px;
  color:#FCA5A5;
  font-size:13.5px; font-weight:600;
  cursor:pointer;
  transition:background .2s;
  text-decoration:none;
  border:none; background:rgba(220,38,38,.15);
  width:calc(100% - 16px);
  text-align:left;
  font-family:inherit;
}
.drawer-logout:hover{ background:rgba(220,38,38,.25); }

/* ============ RESPONSIVE ============ */
@media (max-width:380px){
  .svc-icon{ width:46px; height:46px; font-size:22px; }
  .svc-label{ font-size:9.5px; }
}