/* =========================================================
   BOTVIET SHOPEE AUTOMATION + CHART FIX R10
   ========================================================= */

/* Fix the very tall blank blue areas seen in the user's screenshot. */
body[data-route="shopee"] .shopee-r5-upper{
  align-items:start!important;
}
body[data-route="shopee"] .shopee-r5-upper>.r5-card{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
body[data-route="shopee"] .r5-chart-card{
  min-height:224px!important;
}
body[data-route="shopee"] .r5-order-status{
  align-content:start!important;
}
body[data-route="shopee"] .r5-chart-card .shopee-chart-wrap{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
body[data-route="shopee"] .r5-chart-card .shopee-line-chart{
  display:block!important;
  width:100%!important;
  height:142px!important;
  min-height:142px!important;
  max-height:142px!important;
  overflow:visible!important;
}

/* Compact no-data chart; prevents the chart icon SVG from exploding into a huge black shape. */
body[data-route="shopee"] .r10-chart-empty{
  min-height:164px!important;
  height:164px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:14px!important;
  color:#a9c0de!important;
  text-align:center!important;
}
body[data-route="shopee"] .r10-chart-empty-icon{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  margin-bottom:4px!important;
  border-radius:13px!important;
  color:#42bfff!important;
  background:linear-gradient(135deg,rgba(28,115,226,.28),rgba(44,57,137,.22))!important;
  border:1px solid rgba(65,158,255,.38)!important;
  box-shadow:0 0 20px rgba(44,158,255,.12)!important;
  font-size:28px!important;
}
body[data-route="shopee"] .r10-chart-empty b{color:#e9f3ff!important;font-size:12px!important}
body[data-route="shopee"] .r10-chart-empty small{max-width:360px!important;font-size:9px!important}

/* Defensive constraint for any legacy empty-state SVG. */
body[data-route="shopee"] .shopee-chart-empty .shopee-ui-icon{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  fill:none!important;
  stroke:#41b9ff!important;
  stroke-width:1.8!important;
}

/* Real chart */
body[data-route="shopee"] .r10-chart-wrap{
  position:relative!important;
  padding:4px 12px 8px!important;
}
body[data-route="shopee"] .r10-chart-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:0 4px 4px!important;
}
body[data-route="shopee"] .r10-chart-head span{
  display:flex;
  align-items:baseline;
  gap:6px;
}
body[data-route="shopee"] .r10-chart-head small{font-size:8px;color:#89a6c9}
body[data-route="shopee"] .r10-chart-head b{
  font-size:11px;
  color:#f5f9ff;
  text-shadow:0 0 12px rgba(52,151,255,.22);
}
body[data-route="shopee"] .r10-chart-head .latest b{color:#71c7ff}
body[data-route="shopee"] .r10-line-chart{
  background:linear-gradient(180deg,rgba(9,38,77,.36),rgba(5,25,53,.10))!important;
  border-radius:10px!important;
}
body[data-route="shopee"] .r10-line-chart .shopee-chart-guides line{
  stroke:#21486f!important;
  stroke-width:1!important;
  opacity:.7!important;
}
body[data-route="shopee"] .r10-chart-area{
  fill:rgba(47,137,255,.13)!important;
  stroke:none!important;
  animation:r10AreaFade .9s ease both!important;
}
body[data-route="shopee"] .r10-chart-line{
  fill:none!important;
  stroke:#3197ff!important;
  stroke-width:3!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  stroke-dasharray:1!important;
  stroke-dashoffset:1!important;
  filter:drop-shadow(0 0 5px rgba(49,151,255,.58))!important;
  animation:r10LineDraw 1.25s ease forwards!important;
}
body[data-route="shopee"] .r10-chart-point{
  fill:#2e90ff!important;
  stroke:#9fd1ff!important;
  stroke-width:2!important;
  transform-box:fill-box!important;
  transform-origin:center!important;
  opacity:0;
  animation:r10PointPop .36s ease forwards!important;
  animation-delay:calc(.35s + var(--i)*.09s)!important;
}
body[data-route="shopee"] .r10-line-chart .shopee-chart-label{
  fill:#8eaacb!important;
  font-size:10px!important;
}
body[data-route="shopee"] .r10-chart-values{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:4px!important;
  margin-top:7px!important;
}
body[data-route="shopee"] .r10-chart-values>span{
  min-width:0;
  padding:4px 3px;
  border-radius:7px;
  background:rgba(10,38,76,.56);
  border:1px solid rgba(47,100,157,.35);
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  animation:r10ValueIn .36s ease forwards;
  animation-delay:calc(.45s + var(--i)*.08s);
}
body[data-route="shopee"] .r10-chart-values b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eaf5ff;
  font-size:8px;
}
body[data-route="shopee"] .r10-chart-values small{
  display:block;
  margin-top:2px;
  color:#7898bd;
  font-size:7px;
}
body[data-route="shopee"] .r10-money-ready{
  animation:r10MoneyGlow 1.8s ease-in-out infinite alternate!important;
}

@keyframes r10LineDraw{to{stroke-dashoffset:0}}
@keyframes r10AreaFade{from{opacity:0}to{opacity:1}}
@keyframes r10PointPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes r10ValueIn{to{opacity:1;transform:translateY(0)}}
@keyframes r10MoneyGlow{from{text-shadow:0 0 0 rgba(54,174,255,0)}to{text-shadow:0 0 10px rgba(54,174,255,.45)}}

/* Functional switches */
body[data-route="shopee"] .r5-automation .r10-auto-row,
body[data-route="shopee"] .r10-settings-auto-list .r10-auto-row{
  width:100%!important;
  min-height:66px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 44px!important;
  gap:10px!important;
  align-items:center!important;
  padding:8px 0!important;
  border:0!important;
  border-top:1px solid rgba(42,91,146,.42)!important;
  background:transparent!important;
  text-align:left!important;
  cursor:pointer!important;
}
body[data-route="shopee"] .r5-automation .r10-auto-row:first-child,
body[data-route="shopee"] .r10-settings-auto-list .r10-auto-row:first-child{
  border-top:0!important;
}
body[data-route="shopee"] .r10-auto-copy b{
  display:block!important;
  color:#f3f8ff!important;
  font-size:11px!important;
}
body[data-route="shopee"] .r10-auto-copy small{
  display:block!important;
  margin-top:2px!important;
  color:#9eb4d1!important;
  font-size:9px!important;
}
body[data-route="shopee"] .r10-switch{
  position:relative!important;
  display:block!important;
  width:40px!important;
  height:23px!important;
  padding:3px!important;
  border-radius:999px!important;
  background:#26466f!important;
  border:1px solid rgba(102,147,205,.35)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.22)!important;
  transition:.22s ease!important;
}
body[data-route="shopee"] .r10-switch u{
  display:block!important;
  width:15px!important;
  height:15px!important;
  border-radius:50%!important;
  background:#d9e7f7!important;
  box-shadow:0 2px 6px rgba(0,0,0,.28)!important;
  transition:transform .22s ease,background .22s ease!important;
}
body[data-route="shopee"] .r10-switch.on{
  background:linear-gradient(135deg,#1979ff,#22b6ff)!important;
  border-color:#50bbff!important;
  box-shadow:0 0 13px rgba(37,153,255,.25),inset 0 2px 6px rgba(0,0,0,.12)!important;
}
body[data-route="shopee"] .r10-switch.on u{
  transform:translateX(17px)!important;
  background:#fff!important;
}
body[data-route="shopee"] .r10-auto-row:disabled{
  opacity:.55!important;
  cursor:wait!important;
}
body[data-route="shopee"] .r10-settings-auto-list{padding:0 14px 12px}
body[data-route="shopee"] .r10-auto-error{
  margin:0 14px 12px;
  padding:8px 10px;
  border-radius:9px;
  color:#ffadbd;
  background:rgba(117,20,45,.25);
  border:1px solid rgba(222,68,101,.30);
  font-size:9px;
}

@media(max-width:768px){
  body[data-route="shopee"] .shopee-r5-upper{grid-template-columns:1fr!important}
  body[data-route="shopee"] .r10-chart-values{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body[data-route="shopee"] .r5-chart-card .shopee-line-chart{
    height:128px!important;min-height:128px!important;max-height:128px!important
  }
}