/* ===== RINNET+ LUXURY BLUE & WHITE THEME ===== */
:root{
  --rn-navy:#0a1c4a;--rn-800:#1e3a8a;--rn-700:#1d4ed8;--rn-600:#2563eb;--rn-500:#3b82f6;
  --rn-400:#60a5fa;--rn-300:#93c5fd;--rn-200:#bfdbfe;--rn-100:#dbeafe;--rn-50:#eff6ff;
  --rn-pearl:#f5f8ff;--rn-gold:#f5c451;--rn-ink:#0b1b3f;--rn-muted:#64748b;--rn-line:rgba(37,99,235,.14);
  --rn-grad-main:linear-gradient(135deg,#1e40af 0%,#2563eb 55%,#3b82f6 100%);
  --rn-shadow-sm:0 2px 10px rgba(30,64,175,.08);
  --rn-shadow-md:0 12px 30px -10px rgba(30,64,175,.22);
  --rn-shadow-lg:0 28px 60px -18px rgba(30,64,175,.35);
  --rn-ease:cubic-bezier(.22,.9,.3,1);--rn-spring:cubic-bezier(.34,1.56,.64,1);
  --primary-accent:#1d4ed8;--primary-hover:#2563eb;--secondary-accent:#eff6ff;
  --violet-accent:#3b82f6;--indigo-accent:#2563eb;--bg-app:#f3f7ff;--surface-color:#fff;
  --text-main:#0b1b3f;--text-muted:#64748b;--border-light:rgba(37,99,235,.14);
  --card-radius:20px;--input-radius:12px;--bs-primary:#2563eb;--bs-primary-rgb:37,99,235;--bs-link-color:#1d4ed8;
}
::selection{background:#bfdbfe;color:#0a1c4a}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif!important;
  color:var(--rn-ink);background-color:var(--bg-app)!important;
  background-image:radial-gradient(900px 520px at 100% -5%,rgba(96,165,250,.20),transparent 60%),
                   radial-gradient(700px 480px at -5% 105%,rgba(37,99,235,.12),transparent 60%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
body .content-area{background:transparent!important}
body .text-muted{color:var(--rn-muted)!important}
body .text-dark{color:var(--rn-ink)!important}
body .text-primary{color:var(--rn-700)!important}
*{scrollbar-width:thin;scrollbar-color:#93c5fd transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:linear-gradient(#93c5fd,#60a5fa);border-radius:99px;border:2px solid transparent;background-clip:padding-box}

/* ----- Animasi ----- */
@keyframes rnPageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rnRise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rnOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-24px,0) scale(1.12)}}
@keyframes rnSweep{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(330%) skewX(-20deg)}}
@keyframes rnBreath{0%,100%{box-shadow:0 8px 22px -6px rgba(30,64,175,.45),0 0 0 0 rgba(59,130,246,.40)}55%{box-shadow:0 8px 22px -6px rgba(30,64,175,.45),0 0 0 11px rgba(59,130,246,0)}}
@keyframes rnRipple{to{transform:scale(3.2);opacity:0}}
@keyframes rnGlowRing{0%,100%{box-shadow:0 0 0 0 rgba(96,165,250,.55),0 20px 50px -12px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 18px rgba(96,165,250,0),0 20px 50px -12px rgba(0,0,0,.35)}}
@keyframes rnPop{0%{opacity:0;transform:scale(.92) translateY(10px)}100%{opacity:1;transform:none}}
@keyframes rnSpinOnce{to{transform:rotate(360deg)}}

body .page-section:not(.d-none){animation:rnPageIn .5s var(--rn-ease) both}
body .page-section:not(.d-none) .row.g-3>[class*="col"],
body .page-section:not(.d-none) .row.g-4>[class*="col"]{animation:rnRise .6s var(--rn-ease) backwards}
body .page-section .row>[class*="col"]:nth-child(1){animation-delay:.04s}
body .page-section .row>[class*="col"]:nth-child(2){animation-delay:.09s}
body .page-section .row>[class*="col"]:nth-child(3){animation-delay:.14s}
body .page-section .row>[class*="col"]:nth-child(4){animation-delay:.19s}
body .page-section .row>[class*="col"]:nth-child(5){animation-delay:.24s}
body .page-section .row>[class*="col"]:nth-child(6){animation-delay:.29s}
body .page-section .row>[class*="col"]:nth-child(n+7){animation-delay:.34s}

/* ----- TOMBOL ----- */
body .btn{font-weight:700;letter-spacing:.01em;border-radius:14px;
  transition:transform .35s var(--rn-spring),box-shadow .35s var(--rn-ease),background-color .3s ease,color .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent}
body .btn.rounded-pill{border-radius:999px!important}
body .btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(59,130,246,.28)!important}
body .btn:disabled,body .btn.disabled{opacity:.55;transform:none!important;box-shadow:none!important}

body .btn-primary:not(.fab-btn),body .btn-danger,body .btn-export-lux,body .btn-upload-lux,
body .btn-outline-primary,body .btn-outline-success,body .btn-outline-secondary,body .btn-outline-danger,
body .btn-secondary,body .btn-light:not(.rounded-circle){position:relative;overflow:hidden;isolation:isolate}

body .btn-primary:not(.fab-btn)::before,body .btn-export-lux::before,body .btn-danger::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-130%) skewX(-20deg);pointer-events:none;z-index:1}
body .btn-primary:not(.fab-btn):hover::before,body .btn-export-lux:hover::before,body .btn-danger:hover::before{animation:rnSweep .85s var(--rn-ease)}

body .btn-primary:not(.fab-btn){background:var(--rn-grad-main)!important;color:#fff!important;border:0!important;
  box-shadow:0 10px 22px -8px rgba(37,99,235,.65),inset 0 1px 0 rgba(255,255,255,.25)!important}
body .btn-primary:not(.fab-btn):hover{transform:translateY(-3px);box-shadow:0 16px 30px -8px rgba(37,99,235,.7),inset 0 1px 0 rgba(255,255,255,.3)!important}
body .btn-primary:not(.fab-btn):active{transform:translateY(0) scale(.97)}

body .btn-outline-primary{background:#fff;color:var(--rn-700)!important;border:1.5px solid var(--rn-200)!important;box-shadow:var(--rn-shadow-sm)}
body .btn-outline-primary:hover{background:var(--rn-grad-main)!important;color:#fff!important;border-color:transparent!important;transform:translateY(-3px);box-shadow:0 14px 26px -10px rgba(37,99,235,.6)}

body .btn-outline-success{background:#fff;color:var(--rn-800)!important;border:1.5px solid var(--rn-200)!important;box-shadow:var(--rn-shadow-sm)}
body .btn-outline-success i{color:#16a34a;transition:color .3s ease,transform .4s var(--rn-spring)}
body .btn-outline-success:hover{background:var(--rn-grad-main)!important;color:#fff!important;border-color:transparent!important;transform:translateY(-3px);box-shadow:0 14px 26px -10px rgba(37,99,235,.6)}
body .btn-outline-success:hover i{color:#fff;transform:scale(1.18) rotate(-6deg)}

body .btn-outline-secondary{background:#fff;color:var(--rn-800)!important;border:1.5px solid #d6e2fb!important}
body .btn-outline-secondary:hover{background:var(--rn-50)!important;color:var(--rn-700)!important;border-color:var(--rn-400)!important;transform:translateY(-2px)}
body .btn-outline-secondary:hover i{animation:rnSpinOnce .6s var(--rn-ease)}

body .btn-secondary{background:var(--rn-50)!important;color:var(--rn-800)!important;border:1.5px solid var(--rn-200)!important}
body .btn-secondary:hover{background:var(--rn-100)!important;transform:translateY(-2px)}
body .btn-light:not(.rounded-circle){background:#fff!important;color:var(--rn-800)!important;border:1.5px solid #dbe6fb!important}
body .btn-light:hover{background:var(--rn-50)!important;transform:translateY(-2px)}
body .btn-light.rounded-circle:hover{background:var(--rn-100)!important;color:var(--rn-700)!important}

body .btn-danger{background:linear-gradient(135deg,#e11d48,#f43f5e)!important;border:0!important;color:#fff!important;box-shadow:0 10px 22px -10px rgba(225,29,72,.7)!important}
body .btn-danger:hover{transform:translateY(-3px)}
body .btn-outline-danger{background:#fff;color:#e11d48!important;border:1.5px solid #fecdd3!important}
body .btn-outline-danger:hover{background:linear-gradient(135deg,#e11d48,#f43f5e)!important;color:#fff!important;border-color:transparent!important;transform:translateY(-3px);box-shadow:0 14px 26px -10px rgba(225,29,72,.6)}

/* Tombol Export Agregat Penjualan */
body .btn-export-lux{display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1.5rem!important;color:#fff!important;border:0!important;
  background:linear-gradient(135deg,#0a1c4a 0%,#1e3a8a 45%,#2563eb 100%)!important;
  box-shadow:0 8px 22px -6px rgba(30,64,175,.45);animation:rnBreath 3.2s ease-in-out infinite}
body .btn-export-lux:hover{transform:translateY(-3px) scale(1.03);animation:none;box-shadow:0 18px 34px -10px rgba(30,64,175,.7)}
body .btn-export-lux:active{transform:scale(.97)}
body .btn-export-lux i{margin:0!important;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;
  background:#fff;color:#16a34a!important;font-size:.85rem;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .45s var(--rn-spring)}
body .btn-export-lux:hover i{transform:rotate(-10deg) scale(1.15)}

/* Tombol Upload CSV / Mixradius */
body .btn-upload-lux{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;padding:.72rem 1.5rem!important;font-weight:700;
  color:var(--rn-700)!important;background:linear-gradient(135deg,#fff,var(--rn-50))!important;border:1.5px solid var(--rn-200)!important;box-shadow:var(--rn-shadow-sm)}
body .btn-upload-lux i{margin:0!important;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--rn-100);color:var(--rn-700)!important;font-size:.85rem;transition:transform .45s var(--rn-spring),background .3s ease,color .3s ease}
body .btn-upload-lux:hover{background:var(--rn-grad-main)!important;color:#fff!important;border-color:transparent!important;transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(37,99,235,.65)}
body .btn-upload-lux:hover i{background:rgba(255,255,255,.22);color:#fff!important;transform:translateY(-3px)}
body .btn-upload-lux:active{transform:scale(.97)}

.rn-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:0;background:rgba(255,255,255,.5);transform:scale(0);animation:rnRipple .65s ease-out forwards}
.btn-outline-primary .rn-ripple,.btn-outline-success .rn-ripple,.btn-outline-secondary .rn-ripple,
.btn-upload-lux .rn-ripple,.btn-light .rn-ripple,.btn-secondary .rn-ripple{background:rgba(37,99,235,.22)}

body .btn-login-modern{padding:1rem 1.25rem!important;font-size:1.02rem;letter-spacing:.02em;border-radius:16px!important;
  background:linear-gradient(135deg,#1e40af,#2563eb 55%,#3b82f6)!important;box-shadow:0 18px 34px -12px rgba(37,99,235,.7)!important}
body .notif-btn{border:1px solid var(--rn-line)!important;background:#fff!important;transition:transform .35s var(--rn-spring),box-shadow .3s ease}
body .notif-btn:hover{transform:translateY(-2px) rotate(-8deg);box-shadow:var(--rn-shadow-md)!important}
body .notif-btn i{color:var(--rn-700)!important}
body .fab-btn{background:var(--rn-grad-main)!important;border:0!important;color:#fff!important;animation:rnGlowRing 3s ease-in-out infinite;transition:transform .4s var(--rn-spring)!important}
body .fab-btn:hover{transform:scale(1.1) rotate(90deg)}
body .fab-btn:active{transform:scale(.94)}
body .desktop-toggle-btn{background:#fff!important;color:var(--rn-700)!important;border:1px solid var(--rn-200)!important;box-shadow:var(--rn-shadow-md)!important;
  transition:transform .35s var(--rn-spring),background .25s ease,color .25s ease!important}
body .desktop-toggle-btn:hover{background:var(--rn-grad-main)!important;color:#fff!important;transform:scale(1.12)}

/* ===== SIDEBAR ===== */
body .sidebar{background:linear-gradient(180deg,#fff 0%,#f6f9ff 100%)!important;border-right:1px solid var(--rn-line)!important;
  box-shadow:10px 0 40px -18px rgba(30,64,175,.22)!important;color:var(--rn-ink)}
body .sidebar .text-white,body .sidebar h6{color:var(--rn-ink)!important}
body .sidebar-header{border-color:var(--rn-line)!important;background:linear-gradient(180deg,var(--rn-50),rgba(255,255,255,0))}
body .brand-logo-text{font-family:'Cinzel',serif!important;font-weight:900;letter-spacing:.06em;
  background:linear-gradient(135deg,#0a1c4a,#2563eb 70%,#60a5fa);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important}
body .brand-logo-text .plus-tag{-webkit-text-fill-color:var(--rn-gold);color:var(--rn-gold)!important}
body .profile-avatar-nav{border:3px solid #fff!important;box-shadow:0 0 0 3px var(--rn-200),0 10px 24px -6px rgba(37,99,235,.45)!important;transition:transform .5s var(--rn-spring)}
body .profile-avatar-nav:hover{transform:scale(1.08) rotate(-4deg)}
body #userRoleBadge{background:var(--rn-grad-main)!important;color:#fff!important;letter-spacing:.04em;box-shadow:0 6px 14px -6px rgba(37,99,235,.7)}
body .sidebar-category-title{color:var(--rn-800)!important;opacity:.72;font-size:.68rem!important;font-weight:800!important;letter-spacing:.14em;text-transform:uppercase;transition:opacity .25s ease,color .25s ease}
body .sidebar-category-title:hover{opacity:1;color:var(--rn-600)!important}
body .sidebar-category-title .transition-icon{transition:transform .35s var(--rn-ease)}
body .sidebar-category-title.collapsed .transition-icon{transform:rotate(-90deg)}
body .sidebar .nav-link{position:relative;color:#334b7d!important;font-weight:600;border-radius:14px!important;
  transition:transform .3s var(--rn-ease),background .3s ease,color .3s ease,box-shadow .3s ease}
body .sidebar .nav-link i{color:var(--rn-600)!important;transition:transform .4s var(--rn-spring),color .25s ease}
body .sidebar .nav-link:hover{background:var(--rn-50)!important;color:var(--rn-700)!important;transform:translateX(4px)}
body .sidebar .nav-link:hover i{transform:scale(1.22) rotate(-6deg)}
body .sidebar .nav-link.active{background:var(--rn-grad-main)!important;color:#fff!important;box-shadow:0 12px 24px -10px rgba(37,99,235,.7)!important}
body .sidebar .nav-link.active i{color:#fff!important}
body .sidebar .nav-link.active::before{content:'';position:absolute;left:-9px;top:22%;bottom:22%;width:4px;border-radius:0 6px 6px 0;background:var(--rn-gold);animation:rnPop .4s var(--rn-spring)}
body .sidebar .nav-link.active:hover{transform:translateX(2px)}
body .sidebar-footer{border-top:1px solid var(--rn-line)!important;background:rgba(255,255,255,.7)}
body .sidebar .logout-btn,body .sidebar .logout-btn i{color:#e11d48!important}
body .sidebar .logout-btn:hover{background:#fff1f2!important;color:#be123c!important}
body .app-credit{color:var(--rn-muted)!important;font-size:.68rem}
body .mobile-header{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(14px);border-bottom:1px solid var(--rn-line)!important;box-shadow:var(--rn-shadow-sm)}
body #btnToggleSidebar{color:var(--rn-700)!important;border:1.5px solid var(--rn-200)!important;background:#fff!important;border-radius:12px}
body #btnToggleSidebar:hover{background:var(--rn-grad-main)!important;color:#fff!important}

/* ===== TOPBAR ===== */
body .topbar-modern{border-color:var(--rn-line)!important}
body .topbar-modern h5{background:linear-gradient(135deg,#0a1c4a,#2563eb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body .topbar-modern img{transition:transform .5s var(--rn-spring)}
body .topbar-modern a:hover img{transform:rotate(12deg) scale(1.1)}

/* ===== KARTU ===== */
body .card,body .card-custom,body .card-guide,body .metric-card-premium,body .quick-access-card,body .stat-card{border-radius:20px!important}
body .card,body .card-custom,body .card-guide,body .metric-card-premium,body .quick-access-card{
  background:#fff;border:1px solid var(--rn-line)!important;box-shadow:0 10px 30px -14px rgba(30,64,175,.18)!important;
  transition:transform .45s var(--rn-spring),box-shadow .4s var(--rn-ease),border-color .3s ease}
body .card-custom:hover,body .card-guide:hover,body .metric-card-premium:hover,body .quick-access-card:hover{
  transform:translateY(-6px);box-shadow:0 26px 46px -18px rgba(30,64,175,.35)!important;border-color:rgba(37,99,235,.35)!important}
body .card-header{background:var(--rn-pearl)!important;border-bottom:1px solid var(--rn-line)!important}
body .hover-elevate:hover{transform:translateY(-5px);box-shadow:var(--rn-shadow-md)!important}
body .transition-all{transition:all .35s var(--rn-ease)}

body .quick-access-card{cursor:pointer}
body .quick-icon-box{background:linear-gradient(135deg,var(--rn-50),var(--rn-100))!important;color:var(--rn-700)!important;transition:transform .5s var(--rn-spring),background .3s ease,color .3s ease}
body .quick-access-card:hover .quick-icon-box{background:var(--rn-grad-main)!important;color:#fff!important;transform:scale(1.12) rotate(-8deg)}
body .quick-access-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rn-grad-main);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--rn-ease)}
body .quick-access-card:hover::after{transform:scaleX(1)}

/* Kartu statistik dashboard -> nuansa biru */
body .stat-card{position:relative;overflow:hidden;border:0!important;color:#fff;box-shadow:0 18px 34px -16px rgba(30,64,175,.55)!important;transition:transform .45s var(--rn-spring),box-shadow .4s ease}
body .stat-card::after{content:'';position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-140%) skewX(-20deg);pointer-events:none}
body .stat-card:hover{transform:translateY(-6px) scale(1.02)}
body .stat-card:hover::after{animation:rnSweep 1s var(--rn-ease)}
body .stat-card .stat-icon{transition:transform .6s var(--rn-spring),opacity .3s}
body .stat-card:hover .stat-icon{transform:scale(1.18) rotate(-10deg)}
body #menu-dashboard .row>div:nth-child(6n+1)>.stat-card{background:linear-gradient(135deg,#0a1c4a,#1e3a8a)!important}
body #menu-dashboard .row>div:nth-child(6n+2)>.stat-card{background:linear-gradient(135deg,#1e3a8a,#2563eb)!important}
body #menu-dashboard .row>div:nth-child(6n+3)>.stat-card{background:linear-gradient(135deg,#1d4ed8,#3b82f6)!important}
body #menu-dashboard .row>div:nth-child(6n+4)>.stat-card{background:linear-gradient(135deg,#2563eb,#60a5fa)!important}
body #menu-dashboard .row>div:nth-child(6n+5)>.stat-card{background:linear-gradient(135deg,#0369a1,#38bdf8)!important}
body #menu-dashboard .row>div:nth-child(6n+6)>.stat-card{background:linear-gradient(135deg,#3730a3,#6366f1)!important}

/* Hero selamat datang */
body .welcome-card-lux{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0a1c4a 0%,#1e3a8a 45%,#2563eb 100%)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:28px!important;box-shadow:0 30px 60px -24px rgba(30,64,175,.6)!important}
body .welcome-card-lux::before,body .welcome-card-lux::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
body .welcome-card-lux::before{width:340px;height:340px;right:-90px;top:-140px;background:radial-gradient(circle,rgba(96,165,250,.55),transparent 65%);animation:rnOrb 12s ease-in-out infinite}
body .welcome-card-lux::after{width:260px;height:260px;left:-70px;bottom:-130px;background:radial-gradient(circle,rgba(245,196,81,.22),transparent 65%);animation:rnOrb 15s ease-in-out infinite reverse}
body .welcome-card-lux>*{position:relative;z-index:1}
body .welcome-card-lux .badge{background:rgba(255,255,255,.16)!important;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25)}
body .quotes-box-lux{background:rgba(255,255,255,.10)!important;backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22)!important;border-radius:18px!important;transition:transform .4s var(--rn-ease),background .3s ease}
body .quotes-box-lux:hover{transform:translateY(-3px);background:rgba(255,255,255,.16)!important}
body #liveClockText{font-variant-numeric:tabular-nums;text-shadow:0 4px 18px rgba(96,165,250,.6)}

/* Monitoring system */
body .metric-card-premium{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem}
body .metric-card-premium .icon-box-glow{background:var(--rn-grad-main)!important;color:#fff!important;box-shadow:0 10px 22px -8px rgba(37,99,235,.7)!important;transition:transform .5s var(--rn-spring)}
body .metric-card-premium:hover .icon-box-glow{transform:scale(1.12) rotate(-8deg)}
body .metric-card-premium .title{color:var(--rn-muted)!important;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
body .metric-card-premium .val{color:var(--rn-ink)!important;font-weight:800}
body .live-status-badge{background:#fff!important;border:1px solid var(--rn-line)!important;border-radius:999px!important;padding:.5rem 1.1rem!important;box-shadow:var(--rn-shadow-md)!important}
body .terminal-premium{background:linear-gradient(180deg,#08153a,#0b1f4d)!important;color:#cfe0ff!important;border:1px solid #1e3a8a!important;border-radius:16px!important;box-shadow:inset 0 0 40px rgba(37,99,235,.18);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body .terminal-premium .success{color:#4ade80!important}

/* Panduan & Tentang */
body .guide-icon-box{background:linear-gradient(135deg,var(--rn-50),var(--rn-100))!important;color:var(--rn-700)!important;transition:transform .5s var(--rn-spring),background .3s ease,color .3s ease}
body .card-guide:hover .guide-icon-box{background:var(--rn-grad-main)!important;color:#fff!important;transform:rotate(-8deg) scale(1.1)}
body .card-guide li::marker{color:var(--rn-500)}
body .about-icon-wrapper{background:linear-gradient(135deg,#fff,var(--rn-100))!important;border:1px solid var(--rn-200)!important;border-radius:28px!important;box-shadow:0 22px 44px -18px rgba(37,99,235,.55)!important;animation:rnFloat 4.5s ease-in-out infinite}
body #menu-about h1{background:linear-gradient(135deg,#0a1c4a,#2563eb 70%,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body .badge.bg-light{background:#fff!important;border-color:var(--rn-200)!important;color:var(--rn-800)!important}
body .bg-light{background-color:var(--rn-pearl)!important}
body .border-primary{border-color:var(--rn-500)!important}
body .badge.bg-primary{background:var(--rn-grad-main)!important}
body .page-section>.d-flex h3{color:var(--rn-ink)!important;letter-spacing:-.01em}
body .page-section>.d-flex h3>i{color:var(--rn-600)!important}

/* ===== FORM ===== */
body .form-control,body .form-select{border-radius:12px!important;border:1.5px solid #d3e0fa!important;background-color:#fbfdff!important;color:var(--rn-ink);
  transition:border-color .25s ease,box-shadow .3s ease,background .25s ease,transform .25s var(--rn-ease)}
body .form-control:hover,body .form-select:hover{border-color:var(--rn-300)!important}
body .form-control:focus,body .form-select:focus{background-color:#fff!important;border-color:var(--rn-500)!important;box-shadow:0 0 0 5px rgba(59,130,246,.16)!important;transform:translateY(-1px)}
body .form-label{color:#334b7d}
body .form-check-input:checked{background-color:var(--rn-600)!important;border-color:var(--rn-600)!important}
body .form-check-input:focus{box-shadow:0 0 0 4px rgba(59,130,246,.2);border-color:var(--rn-500)}
body .input-group-text{background:var(--rn-50)!important;color:var(--rn-600)!important;border:1.5px solid #d3e0fa!important}
body .input-group-modern .input-group-text{border-radius:14px 0 0 14px!important}
body .input-group-modern .form-control{padding-top:.8rem;padding-bottom:.8rem}
body .input-group-modern:focus-within .input-group-text{background:var(--rn-100)!important;color:var(--rn-700)!important;border-color:var(--rn-500)!important}
body .input-group-modern>.btn{background:#fff!important;border:1.5px solid #d3e0fa!important;border-radius:0 14px 14px 0!important;color:var(--rn-600)!important}
body .trx-toggle{background:#fff!important;border:1px solid var(--rn-line)!important;border-radius:16px!important;padding:5px!important}
body .trx-toggle .btn{border-radius:12px!important;color:var(--rn-muted)!important;transition:all .35s var(--rn-ease)}
body .trx-toggle .btn-check:checked+.btn{background:var(--rn-grad-main)!important;color:#fff!important;box-shadow:0 10px 20px -8px rgba(37,99,235,.65);transform:scale(1.02)}

/* ===== TABEL ===== */
body .table{--bs-table-bg:transparent}
body .table thead th,body .table-light th,body .table-primary th,body .table-premium thead th{
  background:linear-gradient(180deg,#f1f6ff,#e6efff)!important;color:var(--rn-800)!important;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--rn-200)!important;white-space:nowrap}
body .table tbody td{border-color:#eaf0fc!important;vertical-align:middle}
body .table-hover tbody tr,body .table-premium tbody tr{transition:background .2s ease}
body .table-hover tbody tr:hover>*,body .table-premium tbody tr:hover>*{background-color:var(--rn-50)!important;color:var(--rn-ink)}
body .table-responsive{border-radius:14px}

/* ===== DROPDOWN, MODAL, SWEETALERT ===== */
body .dropdown-menu{border:1px solid var(--rn-line)!important;border-radius:16px!important;box-shadow:var(--rn-shadow-lg)!important;padding:.5rem;animation:rnPop .28s var(--rn-ease)}
body .dropdown-item{border-radius:10px;font-weight:600;transition:background .2s ease,color .2s ease,transform .2s ease}
body .dropdown-item:hover,body .dropdown-item:focus{background:var(--rn-50);color:var(--rn-700);transform:translateX(3px)}
body .notif-dropdown-menu{padding:0!important}
body .modal-backdrop.show{background:#0a1c4a;opacity:.5;backdrop-filter:blur(6px)}
body .modal.fade .modal-dialog{transform:translateY(26px) scale(.96);transition:transform .45s var(--rn-spring),opacity .3s ease}
body .modal.show .modal-dialog{transform:none}
body .modal-content{border:0!important;border-radius:24px!important;overflow:hidden;box-shadow:0 40px 80px -24px rgba(10,28,74,.55)!important}
body .modal-header{background:linear-gradient(135deg,var(--rn-50),#fff)!important;border-bottom:1px solid var(--rn-line)!important}
body .modal-title i{color:var(--rn-600)!important}
body .modal-footer{border-top:1px solid var(--rn-line)!important;background:var(--rn-pearl)}
body .btn-close{transition:transform .35s var(--rn-spring)}
body .btn-close:hover{transform:rotate(90deg) scale(1.1)}
body .alert-danger{border:0;border-left:4px solid #e11d48;border-radius:14px;background:#fff1f2;color:#9f1239}
body .swal2-popup{border-radius:26px!important;font-family:'Plus Jakarta Sans',sans-serif!important;box-shadow:0 40px 80px -24px rgba(10,28,74,.5)!important}
body .swal2-title{color:var(--rn-ink)!important;font-weight:800!important}
body .swal2-styled.swal2-confirm{background:var(--rn-grad-main)!important;border-radius:999px!important;font-weight:700!important;box-shadow:0 12px 24px -10px rgba(37,99,235,.7)!important;transition:transform .3s var(--rn-spring)!important}
body .swal2-styled.swal2-confirm:hover{transform:translateY(-2px)}
body .swal2-styled.swal2-cancel{border-radius:999px!important;font-weight:700!important;background:var(--rn-50)!important;color:var(--rn-800)!important;border:1.5px solid var(--rn-200)!important}
body .swal2-styled.swal2-deny{border-radius:999px!important}
body .swal2-timer-progress-bar{background:var(--rn-500)!important}

/* ===== LOGIN ===== */
body .login-wrapper{background:linear-gradient(135deg,#e8f0ff 0%,#fff 55%,#eaf2ff 100%)!important}
body .login-left{position:relative;overflow:hidden;background:linear-gradient(145deg,#0a1c4a 0%,#1e3a8a 48%,#2563eb 100%)!important}
body .login-left::before,body .login-left::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
body .login-left::before{width:520px;height:520px;top:-190px;right:-170px;background:radial-gradient(circle,rgba(96,165,250,.55),transparent 65%);animation:rnOrb 14s ease-in-out infinite;
  translate:calc(var(--mx,0)*22px) calc(var(--my,0)*22px)}
body .login-left::after{width:420px;height:420px;bottom:-170px;left:-130px;background:radial-gradient(circle,rgba(245,196,81,.22),transparent 65%);animation:rnOrb 18s ease-in-out infinite reverse;
  translate:calc(var(--mx,0)*-26px) calc(var(--my,0)*-26px)}
body .login-left>*{position:relative;z-index:2}
body .brand-glow-logo{background:#fff;border-radius:28px;padding:10px;animation:rnFloat 5s ease-in-out infinite,rnGlowRing 3.4s ease-in-out infinite}
body .title-glow{text-shadow:0 8px 30px rgba(96,165,250,.7);letter-spacing:.04em}
body .subtitle-brand{color:var(--rn-gold)!important;letter-spacing:.12em}
body .login-left .fade-in-up{animation:rnRise .9s var(--rn-ease) both}
body .login-right{background:transparent!important}
body .login-card{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.9)!important;border-radius:28px!important;
  box-shadow:0 40px 80px -30px rgba(30,64,175,.4),0 0 0 1px rgba(37,99,235,.08)!important;animation:rnRise .9s .15s var(--rn-ease) backwards}
body .login-card h3{color:var(--rn-ink)!important;font-weight:800}
body .login-card .border-top{border-color:var(--rn-line)!important}

/* ===== UTILITAS & RESPONSIF ===== */
body .rounded-4{border-radius:20px!important}
body .progress{border-radius:99px;background:var(--rn-100)}
body .progress-bar{background:var(--rn-grad-main)}
body #globalSyncIndicator{background:var(--rn-grad-main)!important;backdrop-filter:blur(10px)}
@media (max-width:991.98px){
  body .welcome-card-lux{border-radius:22px!important}
  body .btn-export-lux,body .btn-upload-lux{width:100%;justify-content:center}
  body #mikhmonUploadBtnContainer,body #mixradiusUploadBtnContainer{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== PERBAIKAN v2 ===== */

/* A. Badge transparan: latar biru muda + teks biru tua (terbaca jelas) */
body .badge.bg-primary.bg-opacity-10{
  background:rgba(37,99,235,.10)!important;
  color:#1d4ed8!important;
  border-color:rgba(37,99,235,.35)!important;
  font-weight:700;
}
body .badge.bg-opacity-10{ font-weight:700; letter-spacing:.01em; }
/* Badge biru penuh (mis. "ENTERPRISE SYSTEM ACTIVE") tetap gradien putih-di-biru */
body .badge.bg-primary:not([class*="bg-opacity"]){
  background:var(--rn-grad-main)!important; color:#fff!important;
}

/* B. Pengaman dropdown: matikan transform di sekitar kolom isian */
body .form-control:focus,
body .form-select:focus{ transform:none!important; }
body .form-select{ width:100%; max-width:100%; text-overflow:ellipsis; }
body .card:has(select),
body .card-custom:has(select),
body .card:has(.form-control),
body .card-custom:has(.form-control){
  transform:none!important;
  transition:box-shadow .3s ease, border-color .3s ease!important;
}
body .card:has(select):hover,
body .card-custom:has(select):hover,
body .card:has(.form-control):hover,
body .card-custom:has(.form-control):hover{ transform:none!important; }

/* Halaman tidak meninggalkan sisa transform setelah animasi selesai */
body .page-section:not(.d-none){ animation:rnPageIn .5s var(--rn-ease) backwards; }

/* Khusus Detail Penjualan: tanpa animasi/transform sama sekali di area filter */
body #menu-rekapPenjualan .card,
body #menu-rekapPenjualan .row > [class*="col"]{
  transform:none!important; animation:none!important;
}

/* ===== PERBAIKAN LOGIN v3 ===== */

/* 1. Satu background utuh untuk seluruh halaman */
body #pageLogin{
  min-height:100vh;
  background:linear-gradient(160deg,#0a1c4a 0%,#12307f 45%,#1d4ed8 100%)!important;
  position:relative;
}
body #pageLogin .login-split,
body #pageLogin .login-left,
body #pageLogin .login-right{
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
/* Matikan pola titik, bulatan blur, dan cahaya penyebab warna belang */
body #pageLogin::before, body #pageLogin::after,
body #pageLogin .login-split::before, body #pageLogin .login-split::after,
body #pageLogin .login-left::before,  body #pageLogin .login-left::after,
body #pageLogin .login-right::before, body #pageLogin .login-right::after{
  content:none!important; display:none!important;
}

/* 2. Tata letak rapi: kiri branding, kanan form, keduanya di tengah */
body #pageLogin .login-split{
  min-height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
}
body #pageLogin .login-left{
  flex:1 1 50%; display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem;
}
body #pageLogin .login-right{
  flex:1 1 50%; display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
/* HP/tablet: branding di atas, form di bawah, tetap satu warna */
@media (max-width:991.98px){
  body #pageLogin .login-split{flex-direction:column; justify-content:flex-start}
  body #pageLogin .login-left{flex:none; width:100%; padding:2.5rem 1.5rem 1rem}
  body #pageLogin .login-right{flex:none; width:100%; padding:1rem 1rem 3rem}
  body #pageLogin .login-card{padding:2rem 1.5rem!important}
}

/* Teks branding di panel kiri */
body #pageLogin .login-left h1{color:#fff!important}
body #pageLogin .login-left .text-white-50{color:rgba(255,255,255,.82)!important}
body #pageLogin .login-left .subtitle-brand{color:#f5c451!important}

/* 3. Kartu form putih bersih */
body #pageLogin .login-card{
  width:100%; max-width:440px; margin:0 auto;
  padding:2.5rem 2.25rem!important;
  background:#fff!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  border:0!important; border-radius:28px!important;
  box-shadow:0 40px 90px -30px rgba(0,10,50,.65)!important;
}

/* 4. Judul, subjudul, label: paksa terlihat (menimpa styles.css baris 892-894) */
body #pageLogin .login-card h3,
body #pageLogin .login-card h3.text-dark{
  color:#0b1b3f!important; -webkit-text-fill-color:#0b1b3f!important;
  opacity:1!important; font-weight:800!important; font-size:1.75rem;
  letter-spacing:-.01em; margin-bottom:.25rem;
}
body #pageLogin .login-card p.text-muted{
  color:#64748b!important; -webkit-text-fill-color:#64748b!important; opacity:1!important;
}
body #pageLogin .login-card .form-label,
body #pageLogin .login-card .form-label.text-secondary{
  color:#1e3a8a!important; -webkit-text-fill-color:#1e3a8a!important; opacity:1!important; font-weight:700;
}

/* 5. Kolom username & password: latar putih, teks gelap, selalu terbaca
      (menimpa styles.css baris 896-900 yang memaksa teks putih) */
body #pageLogin .input-group{flex-wrap:nowrap}
body #pageLogin .input-group-modern .input-group-text{
  background:#eff6ff!important; color:#2563eb!important; -webkit-text-fill-color:#2563eb!important;
  border:1.5px solid #cfdcf7!important; border-right:0!important;
  border-radius:14px 0 0 14px!important; padding:0 1rem;
}
body #pageLogin .input-group-modern .input-group-text i{color:#2563eb!important}

body #pageLogin .input-group-modern .form-control,
body #pageLogin #loginUsername,
body #pageLogin #loginPassword{
  background:#fff!important; background-color:#fff!important; background-image:none!important;
  color:#0b1b3f!important; -webkit-text-fill-color:#0b1b3f!important;
  caret-color:#2563eb;
  border:1.5px solid #cfdcf7!important; border-left:0!important; border-radius:0!important;
  box-shadow:none!important; transform:none!important; opacity:1!important;
  padding:.95rem 1rem; font-size:1rem; font-weight:500; height:auto;
}
body #pageLogin .input-group-modern .form-control:last-child{
  border-radius:0 14px 14px 0!important;
}

/* Tombol mata (lihat password) */
body #pageLogin .input-group-modern #btnTogglePassword{
  background:#fff!important; color:#2563eb!important;
  border:1.5px solid #cfdcf7!important; border-left:0!important;
  border-radius:0 14px 14px 0!important; padding:0 1rem;
}
body #pageLogin #btnTogglePassword i,
body #pageLogin #eyeIcon{color:#2563eb!important}
body #pageLogin #btnTogglePassword:hover{background:#eff6ff!important}

/* Placeholder */
body #pageLogin .input-group-modern .form-control::placeholder{
  color:#94a3b8!important; -webkit-text-fill-color:#94a3b8!important; opacity:1!important;
}

/* Saat dipilih (fokus): cincin biru, teks TETAP gelap */
body #pageLogin .input-group:focus-within{
  box-shadow:0 0 0 4px rgba(59,130,246,.18); border-radius:14px;
}
body #pageLogin .input-group:focus-within>*{border-color:#3b82f6!important}
body #pageLogin .input-group-modern .form-control:focus{
  background:#fff!important; color:#0b1b3f!important; -webkit-text-fill-color:#0b1b3f!important;
}

/* Isi otomatis browser (autofill) tidak boleh mengubah warna */
body #pageLogin input:-webkit-autofill,
body #pageLogin input:-webkit-autofill:hover,
body #pageLogin input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:#0b1b3f!important;
  caret-color:#0b1b3f;
  transition:background-color 9999s ease-in-out 0s;
}

/* 6. Tombol masuk & footer */
body #pageLogin .btn-login-modern{margin-top:.25rem}
body #pageLogin .login-card .border-top{border-color:#e2e8f7!important}
body #pageLogin .login-card .text-muted{color:#64748b!important}

@media (max-width:575.98px){
  body #menu-rekapPenjualan #btnExportRekapPenjualan{width:100%;justify-content:center}
  body #menu-rekapPenjualan #mikhmonUploadBtnContainer,
  body #menu-rekapPenjualan #mixradiusUploadBtnContainer{width:100%}
}

/* =====================================================================
   PERBAIKAN v4 — PANDUAN, GRAFIK DASHBOARD, WIDGET REKAP PENJUALAN
   ===================================================================== */

/* ---------- A. PANDUAN ---------- */
body .guide-hero{
  position:relative; overflow:hidden; color:#fff;
  border-radius:26px; padding:1.75rem 2rem;
  background:linear-gradient(135deg,#0a1c4a 0%,#1e3a8a 50%,#2563eb 100%);
  box-shadow:0 26px 50px -24px rgba(30,64,175,.6);
}
body .guide-hero::before{
  content:''; position:absolute; width:320px; height:320px; right:-90px; top:-130px; border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,.5),transparent 65%);
  animation:rnOrb 12s ease-in-out infinite; pointer-events:none;
}
body .guide-hero>*{position:relative; z-index:1}
body .guide-hero h3, body .guide-hero p{color:#fff!important; -webkit-text-fill-color:#fff}
body .guide-hero h3 i{color:#93c5fd}
body .guide-hero p{opacity:.85; margin-bottom:0}
body .guide-chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .95rem .4rem .45rem;
  border-radius:999px; font-size:.8rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px);
  transition:transform .35s var(--rn-spring), background .3s ease;
}
body .guide-chip b{
  width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center;
  background:#fff; color:#1d4ed8; font-size:.75rem;
}
body .guide-chip:hover{transform:translateY(-3px); background:rgba(255,255,255,.24)}

body .card-guide{position:relative; overflow:hidden; padding:1.35rem 1.4rem}
body .card-guide::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--rn-grad-main);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--rn-ease);
}
body .card-guide:hover::before{transform:scaleX(1)}
body .card-guide h6{color:var(--rn-ink)}
body .card-guide ul.ps-3{list-style:none; padding-left:0!important}
body .card-guide li{position:relative; padding-left:1.4rem; line-height:1.65}
body .card-guide li::before{
  content:''; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%;
  background:var(--rn-grad-main); box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
body .card-guide li strong{color:var(--rn-800)}

/* Widget Bantuan Teknis (menggantikan ungu) */
body .guide-help-card{
  position:sticky; top:1.25rem; overflow:hidden; color:#fff; text-align:center;
  border-radius:26px; padding:2.25rem 1.75rem;
  background:linear-gradient(160deg,#0a1c4a 0%,#1d4ed8 60%,#3b82f6 100%);
  box-shadow:0 30px 60px -26px rgba(30,64,175,.7);
}
body .guide-help-card::before, body .guide-help-card::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
body .guide-help-card::before{
  width:300px; height:300px; right:-110px; top:-120px;
  background:radial-gradient(circle,rgba(147,197,253,.5),transparent 65%);
  animation:rnOrb 12s ease-in-out infinite;
}
body .guide-help-card::after{
  width:240px; height:240px; left:-90px; bottom:-110px;
  background:radial-gradient(circle,rgba(245,196,81,.2),transparent 65%);
  animation:rnOrb 16s ease-in-out infinite reverse;
}
body .guide-help-body{position:relative; z-index:1}
body .guide-help-icon{
  width:86px; height:86px; margin:0 auto 1.25rem; border-radius:50%;
  display:grid; place-items:center; font-size:2rem; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(8px);
  animation:rnGlowRing 3.2s ease-in-out infinite;
}
body .guide-help-card h4{color:#fff}
body .guide-help-card p{color:rgba(255,255,255,.85); font-size:.88rem; line-height:1.8}
body .guide-help-btn{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.25rem; border-radius:999px; background:#fff; color:var(--rn-700);
  font-weight:800; text-decoration:none;
  box-shadow:0 14px 28px -12px rgba(0,10,50,.55);
  transition:transform .35s var(--rn-spring), box-shadow .3s ease, color .25s ease;
}
body .guide-help-btn i{color:#22c55e; font-size:1.25rem; transition:transform .4s var(--rn-spring)}
body .guide-help-btn:hover{transform:translateY(-3px) scale(1.02); color:var(--rn-800); box-shadow:0 22px 38px -14px rgba(0,10,50,.65)}
body .guide-help-btn:hover i{transform:rotate(-12deg) scale(1.2)}
@media (max-width:1199.98px){ body .guide-help-card{position:relative; top:0} }

/* ---------- B. KARTU GRAFIK DASHBOARD ---------- */
body .chart-card-lux{position:relative; overflow:hidden}
body .chart-card-lux::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,#1e3a8a,#3b82f6,#93c5fd);
}
body .chart-badge-lux{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:999px;
  font-size:.78rem; font-weight:800; color:#1e3a8a;
  background:linear-gradient(135deg,#fff,#eff6ff); border:1px solid #bfdbfe;
  box-shadow:0 6px 16px -8px rgba(37,99,235,.5);
}
body .chart-badge-lux::before{
  content:''; width:8px; height:8px; border-radius:50%; background:#2563eb;
  animation:rnLivePulse 2s infinite;
}
@keyframes rnLivePulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.55)}
  70%{box-shadow:0 0 0 8px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
body .chart-card-lux .chart-container-scroll{
  border-radius:16px; padding:.75rem .5rem 0;
  background:linear-gradient(180deg,#fbfdff,#f3f8ff);
}

/* ---------- C. WIDGET RINGKASAN REKAP PENJUALAN (Mikhmon & Mixradius) ---------- */
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:116px; padding:1.25rem 1.35rem!important;
  border-radius:20px!important; border:1px solid rgba(255,255,255,.18);
  background-size:180% 180%!important; background-position:0% 50%!important;
  box-shadow:0 18px 34px -18px rgba(30,64,175,.65)!important;
  transition:transform .45s var(--rn-spring), box-shadow .4s var(--rn-ease), background-position .8s var(--rn-ease);
}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(1) > .p-3.text-white.rounded-3.shadow-sm{background-image:linear-gradient(135deg,#0a1c4a 0%,#1e3a8a 50%,#2563eb 100%)!important}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(2) > .p-3.text-white.rounded-3.shadow-sm{background-image:linear-gradient(135deg,#1e40af 0%,#2563eb 50%,#60a5fa 100%)!important}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(3) > .p-3.text-white.rounded-3.shadow-sm{background-image:linear-gradient(135deg,#0369a1 0%,#0ea5e9 55%,#7dd3fc 100%)!important}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(4) > .p-3.text-white.rounded-3.shadow-sm{background-image:linear-gradient(135deg,#0f3d91 0%,#3b82f6 55%,#93c5fd 100%)!important}

/* Kilau cahaya di sudut kanan atas */
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm::before{
  content:''; position:absolute; z-index:-1; width:190px; height:190px; right:-55px; top:-75px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.30),transparent 65%);
}
/* Ikon besar transparan di kanan bawah */
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm::after{
  content:"\f145"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; z-index:-1; right:1.1rem; bottom:.5rem; font-size:3.6rem; line-height:1;
  color:rgba(255,255,255,.17);
  transition:transform .6s var(--rn-spring), color .3s ease;
}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(2) > .p-3.text-white.rounded-3.shadow-sm::after{content:"\f81d"}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(3) > .p-3.text-white.rounded-3.shadow-sm::after{content:"\f4c0"}
body #menu-rekapPenjualan .row > [class*="col-"]:nth-child(4) > .p-3.text-white.rounded-3.shadow-sm::after{content:"\f555"}

/* Teks label & angka */
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm > span.small{
  font-size:.72rem!important; letter-spacing:.09em!important; color:#dbeafe; opacity:.9;
}
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm h3{
  font-size:clamp(1.5rem,2.2vw,2.1rem); font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; text-shadow:0 4px 14px rgba(0,10,50,.25);
  transform-origin:left center;
}
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm h3 .fs-6{opacity:.8; font-weight:600!important}

/* Interaksi hover */
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm:hover{
  transform:translateY(-6px) scale(1.015);
  background-position:100% 50%!important;
  box-shadow:0 28px 46px -18px rgba(30,64,175,.8)!important;
}
body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm:hover::after{
  transform:scale(1.18) rotate(-8deg); color:rgba(255,255,255,.28);
}

/* Efek "pop" saat angka berubah (dipicu skrip di app.js) */
@keyframes rnNumberPop{
  0%{opacity:.2; transform:translateY(8px) scale(.94)}
  60%{opacity:1; transform:translateY(-2px) scale(1.04)}
  100%{opacity:1; transform:none}
}
body #menu-rekapPenjualan h3.rn-pop{animation:rnNumberPop .55s var(--rn-ease)}

@media (max-width:575.98px){
  body #menu-rekapPenjualan .row > [class*="col-"] > .p-3.text-white.rounded-3.shadow-sm{min-height:98px}
  body .guide-hero{padding:1.35rem 1.25rem; border-radius:22px}
}

/* =====================================================================
   v5 — CMDB, JARINGAN & TIKET (ITSM)
   ===================================================================== */
body .rn-mini-stat{
  position:relative; overflow:hidden; border-radius:18px; padding:1rem 1.15rem;
  background:#fff; border:1px solid var(--rn-line); border-left:5px solid var(--rn-500);
  box-shadow:0 12px 28px -16px rgba(30,64,175,.35);
  transition:transform .4s var(--rn-spring), box-shadow .3s ease;
}
body .rn-mini-stat:hover{transform:translateY(-4px); box-shadow:0 20px 36px -16px rgba(30,64,175,.45)}
body .rn-mini-stat span{display:block; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rn-muted)}
body .rn-mini-stat h3{margin:.25rem 0 0; font-weight:800; color:var(--rn-ink); font-variant-numeric:tabular-nums}
body .rn-mini-stat.up{border-left-color:#22c55e}
body .rn-mini-stat.down{border-left-color:#ef4444}
body .rn-mini-stat.idle{border-left-color:#94a3b8}

.rn-dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.5rem; background:#94a3b8}
.rn-dot.up{background:#22c55e; animation:rnPulseGreen 2s infinite}
.rn-dot.down{background:#ef4444; animation:rnPulseRed 1.5s infinite}
.rn-dot.warn{background:#f59e0b}
@keyframes rnPulseGreen{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes rnPulseRed{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* Riwayat tiket */
.rn-timeline{position:relative; padding-left:1.4rem}
.rn-timeline::before{content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:linear-gradient(#93c5fd,#dbeafe)}
.rn-tl-item{position:relative; display:flex; gap:.75rem; padding-bottom:1rem}
.rn-tl-dot{position:absolute; left:-1.4rem; top:4px; width:14px; height:14px; border-radius:50%; background:var(--rn-grad-main); border:3px solid #fff; box-shadow:0 0 0 2px #bfdbfe}
/* Kartu statistik Dashboard: tinggi seragam */
body #menu-dashboard .row > [class*="col-"] > .stat-card{height:100%}

/* =====================================================================
   v6 — ASISTEN AI
   ===================================================================== */
.fab-dock{position:fixed; right:1.25rem; bottom:1.25rem; z-index:1040; display:flex; flex-direction:column; align-items:center; gap:.85rem; pointer-events:none}
.fab-dock > *{pointer-events:auto}
.fab-dock #mainFabContainer{position:relative!important; inset:auto!important; margin:0!important; transform:none!important}
.fab-dock .dropdown-menu{z-index:1080}
body.ai-open .fab-dock{display:none}

.ai-fab{
  position:relative; width:58px; height:58px; border-radius:50%; border:3px solid #fff; cursor:pointer;
  display:grid; place-items:center; font-size:1.3rem; color:#0a1c4a;
  background:linear-gradient(135deg,#ffe29a 0%,#f5c451 55%,#e8a317 100%);
  box-shadow:0 14px 28px -8px rgba(232,163,23,.75),0 0 0 1px rgba(10,28,74,.12);
  transition:transform .35s var(--rn-spring), box-shadow .3s ease;
}
.ai-fab::before{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(245,196,81,.7); animation:aiPulse 2.4s ease-out infinite}
.ai-fab::after{content:"AI"; position:absolute; top:-6px; right:-6px; min-width:24px; height:24px; padding:0 6px; border-radius:999px; background:#0a1c4a; color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.04em; display:grid; place-items:center; border:2px solid #fff}
.ai-fab:hover{transform:scale(1.1) rotate(-8deg)}
@keyframes aiPulse{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.45);opacity:0}}

.ai-panel{max-height:calc(100dvh - 2rem)}
@media (max-width:575.98px){
  .fab-dock{right:.75rem; bottom:.75rem}
  .ai-panel{left:.5rem; right:.5rem; bottom:.5rem; width:auto; height:calc(100dvh - 1rem)}
}

.ai-panel{
  position:fixed; right:1rem; bottom:1rem; z-index:1060;
  width:min(400px, calc(100vw - 2rem)); height:min(620px, calc(100vh - 2rem));
  display:flex; flex-direction:column; background:#fff; border-radius:24px; overflow:hidden;
  border:1px solid var(--rn-line); box-shadow:0 40px 80px -24px rgba(10,28,74,.55);
  animation:rnPop .3s var(--rn-ease);
}
.ai-head{
  display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; color:#fff;
  background:linear-gradient(135deg,#0a1c4a,#1e3a8a 55%,#2563eb);
}
.ai-avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
}
.ai-icon-btn{
  width:32px; height:32px; border-radius:50%; border:0; color:#fff; background:rgba(255,255,255,.14);
  transition:background .2s ease, transform .3s var(--rn-spring);
}
.ai-icon-btn:hover{background:rgba(255,255,255,.26); transform:scale(1.1)}

.ai-messages{flex:1; overflow-y:auto; padding:1rem; background:linear-gradient(180deg,#f8fbff,#f1f6ff)}
.ai-msg{max-width:88%; margin-bottom:.7rem; padding:.65rem .85rem; border-radius:16px; font-size:.86rem; line-height:1.55; animation:rnRise .35s var(--rn-ease)}
.ai-msg p{margin:0 0 .35rem}
.ai-msg p:last-child{margin-bottom:0}
.ai-msg ul, .ai-msg ol{margin:.25rem 0 .35rem; padding-left:1.15rem}
.ai-msg code{background:#e8f0ff; color:#1e3a8a; padding:.05rem .3rem; border-radius:6px; font-size:.8rem}
.ai-msg.user{margin-left:auto; color:#fff; background:var(--rn-grad-main); border-bottom-right-radius:4px}
.ai-msg.assistant{background:#fff; color:var(--rn-ink); border:1px solid var(--rn-line); border-bottom-left-radius:4px}
.ai-msg.assistant.typing{color:var(--rn-muted); font-style:italic}
.ai-msg.error{background:#fff1f2; color:#9f1239; border:1px solid #fecdd3}
.ai-code{margin:.4rem 0; padding:.6rem .7rem; border-radius:10px; background:#0b1f4d; color:#cfe0ff; font-size:.75rem; white-space:pre-wrap; overflow-x:auto}
.ai-remaining{margin-top:.4rem; font-size:.68rem; color:var(--rn-muted)}

.ai-chips{display:flex; gap:.4rem; overflow-x:auto; padding:.5rem .75rem; border-top:1px solid var(--rn-line); background:#fff}
.ai-chip{
  flex:0 0 auto; padding:.3rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap;
  color:var(--rn-700); background:var(--rn-50); border:1px solid var(--rn-200);
  transition:background .2s ease, color .2s ease, transform .25s var(--rn-spring);
}
.ai-chip:hover{background:var(--rn-grad-main); color:#fff; transform:translateY(-2px)}

.ai-input{display:flex; gap:.5rem; padding:.6rem .75rem; background:#fff}
.ai-input .form-control{border-radius:999px!important}
.ai-send{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:0; color:#fff; background:var(--rn-grad-main);
  transition:transform .3s var(--rn-spring), opacity .2s ease;
}
.ai-send:hover{transform:scale(1.08)}
.ai-send:disabled{opacity:.5; transform:none}
.ai-foot{padding:.35rem .75rem .6rem; font-size:.66rem; color:var(--rn-muted); text-align:center; background:#fff}

/* ===== DETAIL ASET ===== */
.rn-row-click{cursor:pointer}
.rn-detail{border:0; border-radius:24px; background:linear-gradient(180deg,#f8fbff,#f1f6ff)}
.ad-panel{background:#fff; border:1px solid var(--rn-line); border-radius:18px; padding:1rem; box-shadow:var(--rn-shadow-sm)}
.ad-title{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rn-muted)}
.ad-kpi{background:#fff; border:1px solid var(--rn-line); border-radius:16px; padding:.8rem 1rem; height:100%; box-shadow:var(--rn-shadow-sm)}
.ad-kpi span{display:block; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rn-muted)}
.ad-kpi b{display:block; font-size:1.35rem; font-weight:800; color:var(--rn-ink); margin-top:.15rem}
.ad-chart{position:relative; height:230px}
.ad-strip{display:flex; gap:2px; height:30px}
.ad-seg{flex:1; border-radius:4px; min-width:2px}
.ad-seg.up{background:#22c55e}.ad-seg.down{background:#ef4444}.ad-seg.mixed{background:#f59e0b}.ad-seg.nodata{background:#e2e8f0}
.ad-legend{font-size:.68rem; color:var(--rn-muted)}
.ad-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 .3rem 0 .7rem}
.ad-legend i.up{background:#22c55e}.ad-legend i.down{background:#ef4444}.ad-legend i.mixed{background:#f59e0b}.ad-legend i.nodata{background:#e2e8f0}
.ad-info{display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; font-size:.84rem}
.ad-info dt{color:var(--rn-muted); font-weight:700}
.ad-info dd{margin:0; color:var(--rn-ink); word-break:break-word}
.ad-list{list-style:none; margin:0; padding:0; font-size:.84rem}
.ad-list li{padding:.5rem 0; border-bottom:1px dashed var(--rn-line)}
.ad-list li:last-child{border-bottom:0}
.ad-ev{display:flex; flex-direction:column; border-left:3px solid #22c55e; padding-left:.7rem!important}
.ad-ev.down{border-left-color:#ef4444}
.ad-ev span{color:var(--rn-muted); font-size:.78rem}

.ad-gauge{background:#fff; border:1px solid var(--rn-line); border-radius:16px; padding:.8rem 1rem; height:100%; box-shadow:var(--rn-shadow-sm)}
.ad-gauge .lbl{font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rn-muted)}
.ad-gauge .val{font-size:1.05rem; font-weight:800; color:var(--rn-ink); margin-top:.15rem}
.ad-meter{height:8px; border-radius:999px; background:#e2e8f0; overflow:hidden; margin-top:.45rem}
.ad-meter > i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#22c55e,#2563eb)}
.ad-meter.warn > i{background:linear-gradient(90deg,#f59e0b,#ef4444)}