/* =========================================================
   BOTVIET SHOPEE VISUAL FIX R6
   Fixes R5 visual issues only:
   - dark functional panels instead of white cards
   - readable table/text colors
   - noticeably stronger hero motion
   - keeps Shopee full-width
   Does NOT change backend/server/database/menu/topbar/logo.
   ========================================================= */

/* ---------- Full-width Shopee shell ---------- */
@media (min-width:769px){
  body[data-route="shopee"] .content{
    width:calc(100vw - var(--sidebar))!important;
    max-width:none!important;
    margin-left:var(--sidebar)!important;
    margin-right:0!important;
  }
}
body[data-route="shopee"] #page-body,
body[data-route="shopee"] #page-body>*,
body[data-route="shopee"] .shopee-r5-dashboard,
body[data-route="shopee"] .shopee-r5-functional-shell,
body[data-route="shopee"] .shopee-workspace-panel{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* ---------- Strong, visible hero animation ---------- */
body[data-route="shopee"] .shopee-r5-hero{
  isolation:isolate;
  overflow:hidden!important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.24),
    0 0 0 1px rgba(49,139,255,.14),
    0 0 34px rgba(36,123,255,.14)!important;
}
body[data-route="shopee"] .shopee-r5-hero img{
  transform-origin:58% 50%!important;
  will-change:transform,filter!important;
  animation:r6HeroMove 8.5s cubic-bezier(.45,.05,.25,1) infinite alternate!important;
  filter:saturate(1.08) contrast(1.035) brightness(1.02)!important;
}
body[data-route="shopee"] .shopee-r5-hero-glow{
  opacity:.9!important;
  will-change:transform,opacity!important;
  animation:r6GlowPulse 3s ease-in-out infinite!important;
}
body[data-route="shopee"] .shopee-r5-hero-scan{
  width:12%!important;
  left:-20%!important;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(70,222,255,.06),
    rgba(255,255,255,.34),
    rgba(255,100,236,.12),
    transparent
  )!important;
  filter:blur(1px)!important;
  animation:r6HeroScan 3.15s linear infinite!important;
}
body[data-route="shopee"] .shopee-r5-hero::before{
  content:"";
  position:absolute;
  inset:-45%;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 60% 43%,rgba(0,224,255,.18),transparent 15%),
    radial-gradient(circle at 74% 55%,rgba(137,71,255,.16),transparent 17%);
  mix-blend-mode:screen;
  opacity:.8;
  animation:r6Aurora 5s ease-in-out infinite alternate!important;
}
body[data-route="shopee"] .shopee-r5-hero::after{
  content:"";
  position:absolute;
  z-index:3;
  left:-12%;
  bottom:-25%;
  width:125%;
  height:46%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(21,191,255,.20),transparent 58%);
  filter:blur(18px);
  animation:r6FloorGlow 3.4s ease-in-out infinite!important;
}
body[data-route="shopee"] .shopee-r5-particle{
  z-index:4!important;
  width:9px!important;
  height:9px!important;
  opacity:1!important;
  box-shadow:0 0 12px currentColor,0 0 26px currentColor!important;
}
body[data-route="shopee"] .shopee-r5-particle.p1{
  color:#54eaff!important;background:#54eaff!important;
  animation:r6Particle1 2.8s ease-in-out infinite!important;
}
body[data-route="shopee"] .shopee-r5-particle.p2{
  color:#a957ff!important;background:#a957ff!important;
  animation:r6Particle2 3.3s ease-in-out infinite!important;
}
body[data-route="shopee"] .shopee-r5-particle.p3{
  color:#ff5bd7!important;background:#ff5bd7!important;
  animation:r6Particle3 3.1s ease-in-out infinite!important;
}
body[data-route="shopee"] .shopee-r5-particle.p4{
  color:#35ffb2!important;background:#35ffb2!important;
  animation:r6Particle4 3.7s ease-in-out infinite!important;
}

@keyframes r6HeroMove{
  0%{
    transform:scale(1.015) translate3d(-.5%,0,0);
    filter:saturate(1.05) contrast(1.02) brightness(1.00);
  }
  45%{
    transform:scale(1.045) translate3d(-1.5%,-.8%,0);
    filter:saturate(1.12) contrast(1.04) brightness(1.04);
  }
  100%{
    transform:scale(1.065) translate3d(.8%,.4%,0);
    filter:saturate(1.09) contrast(1.045) brightness(1.02);
  }
}
@keyframes r6HeroScan{
  0%{transform:translate3d(-20%,0,0) rotate(17deg);opacity:0}
  10%{opacity:.9}
  55%{opacity:1}
  100%{transform:translate3d(1050%,0,0) rotate(17deg);opacity:0}
}
@keyframes r6GlowPulse{
  0%,100%{transform:scale(.95) translate3d(-1%,0,0);opacity:.45}
  50%{transform:scale(1.08) translate3d(1%,-1%,0);opacity:1}
}
@keyframes r6Aurora{
  0%{transform:translate3d(-2%,1%,0) rotate(-2deg);opacity:.45}
  100%{transform:translate3d(4%,-3%,0) rotate(3deg);opacity:.95}
}
@keyframes r6FloorGlow{
  0%,100%{transform:scaleX(.88);opacity:.35}
  50%{transform:scaleX(1.1);opacity:.85}
}
@keyframes r6Particle1{
  0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.35}
  50%{transform:translate3d(17px,-18px,0) scale(1.35);opacity:1}
}
@keyframes r6Particle2{
  0%,100%{transform:translate3d(0,0,0) scale(.7);opacity:.4}
  50%{transform:translate3d(-18px,15px,0) scale(1.25);opacity:1}
}
@keyframes r6Particle3{
  0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.3}
  50%{transform:translate3d(20px,13px,0) scale(1.45);opacity:1}
}
@keyframes r6Particle4{
  0%,100%{transform:translate3d(0,0,0) scale(.75);opacity:.35}
  50%{transform:translate3d(-15px,-17px,0) scale(1.35);opacity:1}
}

/* R5 previously disabled motion when Windows/Chrome reports reduced motion.
   The user explicitly requested animated Shopee hero, so keep a gentle version active. */
@media (prefers-reduced-motion:reduce){
  body[data-route="shopee"] .shopee-r5-hero img{
    animation:r6HeroMove 12s ease-in-out infinite alternate!important;
  }
  body[data-route="shopee"] .shopee-r5-hero-scan{
    animation:r6HeroScan 5s linear infinite!important;
  }
  body[data-route="shopee"] .shopee-r5-hero-glow{
    animation:r6GlowPulse 5s ease-in-out infinite!important;
  }
  body[data-route="shopee"] .shopee-r5-particle.p1{animation:r6Particle1 5s ease-in-out infinite!important}
  body[data-route="shopee"] .shopee-r5-particle.p2{animation:r6Particle2 5.5s ease-in-out infinite!important}
  body[data-route="shopee"] .shopee-r5-particle.p3{animation:r6Particle3 5.2s ease-in-out infinite!important}
  body[data-route="shopee"] .shopee-r5-particle.p4{animation:r6Particle4 5.8s ease-in-out infinite!important}
}

/* ---------- FIX: functional Shopee pages were rendered with white backgrounds ---------- */
body[data-route="shopee"] .shopee-r5-functional-shell,
body[data-route="shopee"] .shopee-workspace-panel{
  color:#eef5ff!important;
  background:transparent!important;
}
body[data-route="shopee"] .shopee-section-title{
  color:#eef5ff!important;
}
body[data-route="shopee"] .shopee-section-title small{
  color:#73dfff!important;
}
body[data-route="shopee"] .shopee-section-title h2,
body[data-route="shopee"] .shopee-section-title h3{
  color:#f7faff!important;
}
body[data-route="shopee"] .shopee-section-title p{
  color:#a9bdd8!important;
}

/* KPI cards */
body[data-route="shopee"] .shopee-mini-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
body[data-route="shopee"] .shopee-mini-kpis>div{
  min-width:0!important;
  color:#eef5ff!important;
  background:
    radial-gradient(circle at 15% 0,rgba(44,121,255,.10),transparent 45%),
    linear-gradient(180deg,#0a2044,#071831)!important;
  border:1px solid #285c9f!important;
  border-radius:15px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14)!important;
}
body[data-route="shopee"] .shopee-mini-kpis small{color:#9fb6d4!important}
body[data-route="shopee"] .shopee-mini-kpis b{color:#fff!important}

/* Premium cards + settings panels */
body[data-route="shopee"] .shopee-premium-card,
body[data-route="shopee"] .shopee-orders-card,
body[data-route="shopee"] .shopee-settings-grid>.shopee-premium-card,
body[data-route="shopee"] .shopee-permission-banner,
body[data-route="shopee"] .shopee-capability-note,
body[data-route="shopee"] .shopee-chart-card,
body[data-route="shopee"] .shopee-kpi-card{
  color:#edf5ff!important;
  background:
    radial-gradient(circle at 12% 0,rgba(36,107,221,.09),transparent 34%),
    linear-gradient(180deg,#091e40,#06162e)!important;
  border:1px solid #285b9b!important;
  box-shadow:0 12px 28px rgba(0,0,0,.15)!important;
}
body[data-route="shopee"] .shopee-premium-card header,
body[data-route="shopee"] .shopee-orders-head{
  color:#f4f8ff!important;
  background:transparent!important;
}
body[data-route="shopee"] .shopee-premium-card h3,
body[data-route="shopee"] .shopee-orders-head h3{
  color:#fff!important;
}
body[data-route="shopee"] .shopee-premium-card small,
body[data-route="shopee"] .shopee-orders-head p,
body[data-route="shopee"] .shopee-permission-banner p,
body[data-route="shopee"] .shopee-capability-note p{
  color:#9eb5d2!important;
}

/* Settings lists */
body[data-route="shopee"] .shopee-settings-list{
  color:#eaf3ff!important;
}
body[data-route="shopee"] .shopee-settings-list>div{
  background:rgba(8,31,63,.62)!important;
  border-color:#244d7e!important;
}
body[data-route="shopee"] .shopee-settings-list dt{
  color:#9fb6d4!important;
}
body[data-route="shopee"] .shopee-settings-list dd{
  color:#f3f7ff!important;
}

/* Data tables */
body[data-route="shopee"] .table-wrap{
  background:#071a35!important;
  border-color:#28588f!important;
}
body[data-route="shopee"] .data-table{
  color:#e9f2ff!important;
  background:#071a35!important;
}
body[data-route="shopee"] .data-table thead,
body[data-route="shopee"] .data-table thead tr,
body[data-route="shopee"] .data-table th{
  color:#9fc0e7!important;
  background:#0b2347!important;
  border-color:#2a5689!important;
}
body[data-route="shopee"] .data-table tbody,
body[data-route="shopee"] .data-table tbody tr,
body[data-route="shopee"] .data-table td{
  color:#e9f2ff!important;
  background:#071a35!important;
  border-color:#264d7d!important;
}
body[data-route="shopee"] .data-table tbody tr:nth-child(even) td{
  background:#081d3b!important;
}
body[data-route="shopee"] .data-table tbody tr:hover td{
  background:#0b2a52!important;
}
body[data-route="shopee"] .data-table b{
  color:#f5f9ff!important;
}
body[data-route="shopee"] .data-table small,
body[data-route="shopee"] .table-subline{
  color:#8fa9c8!important;
}
body[data-route="shopee"] .data-table .thumb{
  color:#62b6ff!important;
  background:#0d315e!important;
  border-color:#2b65a4!important;
}

/* Empty/notice states */
body[data-route="shopee"] .shopee-empty-state,
body[data-route="shopee"] .shopee-empty-orders{
  color:#b7cae2!important;
  background:#081d3a!important;
}
body[data-route="shopee"] .shopee-permission-banner{
  color:#dceaff!important;
}

/* Functional header polish */
body[data-route="shopee"] .shopee-r5-functional-bar{
  border-color:#2d69ad!important;
  background:
    radial-gradient(circle at 30% 0,rgba(33,112,232,.09),transparent 42%),
    linear-gradient(180deg,#091f42,#071932)!important;
  box-shadow:0 11px 28px rgba(0,0,0,.16)!important;
}
body[data-route="shopee"] .shopee-r5-functional-bar small{color:#46d8ff!important}
body[data-route="shopee"] .shopee-r5-functional-bar b{color:#fff!important}

/* Keep buttons readable */
body[data-route="shopee"] .shopee-workspace-panel .btn:not(.primary){
  color:#eaf4ff!important;
  background:#0a2448!important;
  border-color:#2b5f98!important;
}
body[data-route="shopee"] .shopee-workspace-panel .btn.primary{
  color:#fff!important;
  background:linear-gradient(135deg,#287cff,#12a8ff)!important;
  border-color:#2b9dff!important;
}

/* Mobile */
@media(max-width:900px){
  body[data-route="shopee"] .shopee-mini-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:520px){
  body[data-route="shopee"] .shopee-mini-kpis{
    grid-template-columns:1fr!important;
  }
}