/* Profit Scanner video-style dashboard shell + clean expandable sidebar v3
   Solo UI: no cambia controladores, base de datos ni lógica de escaneo. */
:root{
  --ps-video-bg:#071b2c;
  --ps-video-main:#071b2c;
  --ps-video-sidebar:#06101b;
  --ps-video-panel:#0c2134;
  --ps-video-line:rgba(56,86,112,.52);
  --ps-video-blue:#039df2;
  --ps-video-green:#10d18a;
  --ps-video-text:#eaf4ff;
  --ps-video-muted:#93a8bd;
  --ps-sidebar-closed:52px;
  --ps-sidebar-open:252px;
  --ps-sidebar-speed:.20s;
}

html,body{background:var(--ps-video-bg)!important;}
body.ps-app{
  background:var(--ps-video-bg)!important;
  color:var(--ps-video-text)!important;
  overflow-x:hidden!important;
}
body.ps-app,body.ps-app *{box-sizing:border-box;}

/* =========================================================
   SIDEBAR: cerrado por defecto, abierto por hover o botón.
   Cuando se abre, el contenido se desplaza: no tapa la página.
   ========================================================= */
.sidebar.ps-sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  z-index:1000!important;
  width:var(--ps-sidebar-closed)!important;
  min-width:var(--ps-sidebar-closed)!important;
  max-width:var(--ps-sidebar-open)!important;
  height:100vh!important;
  overflow:hidden!important;
  background:var(--ps-video-sidebar)!important;
  border-right:1px solid rgba(58,91,120,.42)!important;
  padding:0!important;
  box-shadow:none!important;
  transition:width var(--ps-sidebar-speed) ease, box-shadow var(--ps-sidebar-speed) ease, border-color var(--ps-sidebar-speed) ease!important;
}

/* Abierto por JS */
body.ps-sidebar-expanded .sidebar.ps-sidebar,
body.ps-sidebar-pinned .sidebar.ps-sidebar{
  width:var(--ps-sidebar-open)!important;
  min-width:var(--ps-sidebar-open)!important;
  border-right-color:rgba(69,104,134,.58)!important;
  box-shadow:16px 0 40px rgba(0,0,0,.16)!important;
}

/* Fallback sin JS: al pasar el ratón también abre */
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .sidebar.ps-sidebar{
    width:var(--ps-sidebar-open)!important;
    min-width:var(--ps-sidebar-open)!important;
    border-right-color:rgba(69,104,134,.58)!important;
    box-shadow:16px 0 40px rgba(0,0,0,.16)!important;
  }
}

/* Top cerrado: PS arriba y botón visible debajo. */
.ps-sidebar-top{
  position:relative!important;
  min-height:80px!important;
  height:80px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:10px 0 8px!important;
  border-bottom:1px solid rgba(58,91,120,.16)!important;
  transition:height var(--ps-sidebar-speed) ease, min-height var(--ps-sidebar-speed) ease, padding var(--ps-sidebar-speed) ease, flex-direction var(--ps-sidebar-speed) ease!important;
}

body.ps-sidebar-expanded .ps-sidebar-top,
body.ps-sidebar-pinned .ps-sidebar-top{
  min-height:58px!important;
  height:58px!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:9px!important;
  padding:12px 12px 10px!important;
  border-bottom-color:rgba(58,91,120,.28)!important;
}

@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-sidebar-top{
    min-height:58px!important;
    height:58px!important;
    flex-direction:row!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:9px!important;
    padding:12px 12px 10px!important;
    border-bottom-color:rgba(58,91,120,.28)!important;
  }
}

.ps-brand{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border-radius:8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  overflow:hidden!important;
  background:#071b2c!important;
  border:1px solid rgba(72,105,133,.52)!important;
  color:#f1f8ff!important;
  text-decoration:none!important;
  flex:0 0 auto!important;
  transition:width var(--ps-sidebar-speed) ease, height var(--ps-sidebar-speed) ease, border-color var(--ps-sidebar-speed) ease, background var(--ps-sidebar-speed) ease!important;
}

body.ps-sidebar-expanded .ps-brand,
body.ps-sidebar-pinned .ps-brand{
  width:185px!important;
  height:34px!important;
  justify-content:flex-start!important;
  padding:0 10px!important;
  border-color:rgba(3,157,242,.32)!important;
  background:#081d30!important;
}

@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-brand{
    width:185px!important;
    height:34px!important;
    justify-content:flex-start!important;
    padding:0 10px!important;
    border-color:rgba(3,157,242,.32)!important;
    background:#081d30!important;
  }
}

.ps-brand-main{
  display:flex!important;
  align-items:center!important;
  white-space:nowrap!important;
  line-height:1!important;
  color:#eef7ff!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}
.ps-brand-main::before{
  content:'PS';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#eef7ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:-.06em;
}
.ps-brand-profit,.ps-brand-dash,.ps-brand-scanner,.ps-brand small{display:none!important;}

body.ps-sidebar-expanded .ps-brand-main::before,
body.ps-sidebar-pinned .ps-brand-main::before{
  content:'PS';
  width:22px;
  height:22px;
  margin-right:8px;
  border-radius:7px;
  background:#0b2a44;
  border:1px solid rgba(3,157,242,.26);
  font-size:10px;
}
body.ps-sidebar-expanded .ps-brand-main::after,
body.ps-sidebar-pinned .ps-brand-main::after{
  content:'Profit-Scanner';
  font-size:14px;
  color:#eef7ff;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-brand-main::before{
    content:'PS';width:22px;height:22px;margin-right:8px;border-radius:7px;background:#0b2a44;border:1px solid rgba(3,157,242,.26);font-size:10px;
  }
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-brand-main::after{
    content:'Profit-Scanner';font-size:14px;color:#eef7ff;
  }
}

/* Botón siempre visible: evita que parezca que no pliega. */
.ps-sidebar-collapse{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  border:1px solid rgba(69,104,134,.76)!important;
  background:#0b2237!important;
  color:#9eb6cb!important;
  font-size:17px!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
  cursor:pointer!important;
  opacity:1!important;
  pointer-events:auto!important;
  flex:0 0 auto!important;
  transition:background var(--ps-sidebar-speed) ease, color var(--ps-sidebar-speed) ease, transform var(--ps-sidebar-speed) ease, border-color var(--ps-sidebar-speed) ease!important;
}
.ps-sidebar-collapse:hover{
  background:#123252!important;
  color:#eaf4ff!important;
  border-color:rgba(3,157,242,.40)!important;
}
body.ps-sidebar-expanded .ps-sidebar-collapse,
body.ps-sidebar-pinned .ps-sidebar-collapse{
  transform:rotate(180deg)!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-sidebar-collapse{
    transform:rotate(180deg)!important;
  }
}

.ps-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  padding:12px 0 0!important;
  align-items:center!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  max-height:calc(100vh - 150px)!important;
  scrollbar-width:none!important;
  transition:align-items var(--ps-sidebar-speed) ease, padding var(--ps-sidebar-speed) ease, gap var(--ps-sidebar-speed) ease, max-height var(--ps-sidebar-speed) ease!important;
}
.ps-nav::-webkit-scrollbar{display:none!important;}
body.ps-sidebar-expanded .ps-nav,
body.ps-sidebar-pinned .ps-nav{
  align-items:stretch!important;
  gap:5px!important;
  padding:14px 10px 0!important;
  max-height:calc(100vh - 118px)!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav{
    align-items:stretch!important;gap:5px!important;padding:14px 10px 0!important;max-height:calc(100vh - 118px)!important;
  }
}

.ps-nav a,
.ps-nav-group-title{
  position:relative!important;
  width:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  height:34px!important;
  padding:0!important;
  margin:0!important;
  border-radius:7px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:0!important;
  background:transparent!important;
  color:#7895ad!important;
  border:1px solid transparent!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  overflow:hidden!important;
  transition:background var(--ps-sidebar-speed) ease, color var(--ps-sidebar-speed) ease, border-color var(--ps-sidebar-speed) ease, width var(--ps-sidebar-speed) ease, padding var(--ps-sidebar-speed) ease, gap var(--ps-sidebar-speed) ease!important;
}
body.ps-sidebar-expanded .ps-nav a,
body.ps-sidebar-pinned .ps-nav a,
body.ps-sidebar-expanded .ps-nav-group-title,
body.ps-sidebar-pinned .ps-nav-group-title{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  justify-content:flex-start!important;
  gap:11px!important;
  padding:0 11px!important;
  font-size:13px!important;
  font-weight:750!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav a,
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav-group-title{
    width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;justify-content:flex-start!important;gap:11px!important;padding:0 11px!important;font-size:13px!important;font-weight:750!important;
  }
}

.ps-nav a > span:not(.ps-nav-ico),
.ps-nav-group-title > span:not(.ps-nav-ico){display:none!important;}
body.ps-sidebar-expanded .ps-nav a > span:not(.ps-nav-ico),
body.ps-sidebar-pinned .ps-nav a > span:not(.ps-nav-ico),
body.ps-sidebar-expanded .ps-nav-group-title > span:not(.ps-nav-ico),
body.ps-sidebar-pinned .ps-nav-group-title > span:not(.ps-nav-ico){
  display:inline-flex!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav a > span:not(.ps-nav-ico),
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav-group-title > span:not(.ps-nav-ico){display:inline-flex!important;overflow:hidden!important;text-overflow:ellipsis!important;}
}

.ps-nav-ico{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  color:inherit!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.ps-nav-ico svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.ps-nav a:hover,
.ps-nav a.active,
.ps-nav-group-title:hover,
.ps-nav-group.is-open .ps-nav-group-title{
  background:#0c2740!important;
  color:#06a8ff!important;
  border-color:rgba(3,157,242,.24)!important;
}

.ps-nav-group{width:34px!important;}
body.ps-sidebar-expanded .ps-nav-group,
body.ps-sidebar-pinned .ps-nav-group{width:100%!important;}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav-group{width:100%!important;}
}
.ps-nav-group-title b,.ps-badge{display:none!important;}
body.ps-sidebar-expanded .ps-nav-group-title b,
body.ps-sidebar-pinned .ps-nav-group-title b{
  display:inline-flex!important;margin-left:auto!important;font-size:11px!important;color:#7890a4!important;transform:rotate(180deg);
}
body.ps-sidebar-expanded .ps-nav-group.is-open .ps-nav-group-title b,
body.ps-sidebar-pinned .ps-nav-group.is-open .ps-nav-group-title b{transform:rotate(0deg);}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav-group-title b{display:inline-flex!important;margin-left:auto!important;font-size:11px!important;color:#7890a4!important;transform:rotate(180deg);}
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav-group.is-open .ps-nav-group-title b{transform:rotate(0deg);}
}

body.ps-sidebar-expanded .ps-badge,
body.ps-sidebar-pinned .ps-badge{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:18px!important;height:18px!important;margin-left:auto!important;border-radius:999px!important;background:#eb305f!important;color:#fff!important;font-size:10px!important;font-style:normal!important;font-weight:900!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:18px!important;height:18px!important;margin-left:auto!important;border-radius:999px!important;background:#eb305f!important;color:#fff!important;font-size:10px!important;font-style:normal!important;font-weight:900!important;}
}

.ps-subnav{display:none!important;}
body.ps-sidebar-expanded .ps-nav-group.is-open .ps-subnav,
body.ps-sidebar-pinned .ps-nav-group.is-open .ps-subnav{
  display:flex!important;width:100%!important;min-height:30px!important;height:30px!important;padding:0 10px 0 43px!important;margin:1px 0!important;border-radius:6px!important;background:transparent!important;color:#8ea4b8!important;font-size:12px!important;font-weight:650!important;justify-content:flex-start!important;gap:8px!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-nav-group.is-open .ps-subnav{display:flex!important;width:100%!important;min-height:30px!important;height:30px!important;padding:0 10px 0 43px!important;margin:1px 0!important;border-radius:6px!important;background:transparent!important;color:#8ea4b8!important;font-size:12px!important;font-weight:650!important;justify-content:flex-start!important;gap:8px!important;}
}

.ps-sidebar-foot{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:8px!important;
  padding:0!important;
  transition:padding var(--ps-sidebar-speed) ease, align-items var(--ps-sidebar-speed) ease!important;
}
.ps-lang,.ps-theme{
  width:34px!important;height:34px!important;border-radius:7px!important;border:1px solid transparent!important;background:transparent!important;color:#7895ad!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;cursor:pointer!important;overflow:hidden!important;
}
.ps-lang b,.ps-lang span:nth-child(3),.ps-lang small{display:none!important;}
body.ps-sidebar-expanded .ps-sidebar-foot,
body.ps-sidebar-pinned .ps-sidebar-foot{align-items:stretch!important;padding:0 10px!important;}
body.ps-sidebar-expanded .ps-lang,
body.ps-sidebar-pinned .ps-lang{width:100%!important;justify-content:flex-start!important;gap:8px!important;padding:0 11px!important;color:#8ea4b8!important;}
body.ps-sidebar-expanded .ps-lang b,
body.ps-sidebar-pinned .ps-lang b,
body.ps-sidebar-expanded .ps-lang span:nth-child(3),
body.ps-sidebar-pinned .ps-lang span:nth-child(3),
body.ps-sidebar-expanded .ps-lang small,
body.ps-sidebar-pinned .ps-lang small{display:inline-flex!important;}
body.ps-sidebar-expanded .ps-theme,
body.ps-sidebar-pinned .ps-theme{width:100%!important;}
.ps-lang:hover,.ps-theme:hover{background:#0c2740!important;color:#06a8ff!important;border-color:rgba(3,157,242,.24)!important;}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-sidebar-foot{align-items:stretch!important;padding:0 10px!important;}
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-lang{width:100%!important;justify-content:flex-start!important;gap:8px!important;padding:0 11px!important;color:#8ea4b8!important;}
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-lang b,
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-lang span:nth-child(3),
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-lang small{display:inline-flex!important;}
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .ps-theme{width:100%!important;}
}

/* MAIN: siempre deja sitio exacto para el menú; no queda nada escondido debajo. */
.main.ps-main,
.main{
  margin-left:var(--ps-sidebar-closed)!important;
  width:calc(100vw - var(--ps-sidebar-closed))!important;
  min-height:100vh!important;
  padding:0!important;
  background:var(--ps-video-main)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  transition:margin-left var(--ps-sidebar-speed) ease, width var(--ps-sidebar-speed) ease!important;
}
body.ps-sidebar-expanded .main.ps-main,
body.ps-sidebar-expanded .main,
body.ps-sidebar-pinned .main.ps-main,
body.ps-sidebar-pinned .main{
  margin-left:var(--ps-sidebar-open)!important;
  width:calc(100vw - var(--ps-sidebar-open))!important;
}
@supports selector(body:has(.sidebar.ps-sidebar:hover)){
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .main.ps-main,
  body.ps-app:not(.ps-sidebar-pinned):has(.sidebar.ps-sidebar:hover) .main{
    margin-left:var(--ps-sidebar-open)!important;
    width:calc(100vw - var(--ps-sidebar-open))!important;
  }
}
.main.full{margin-left:0!important;width:100vw!important;}

/* Pequeños ajustes para que el dashboard no se corte cuando cambia el menú. */
.ps-dashboard-page{
  width:100%!important;
  max-width:none!important;
  padding-left:32px!important;
  padding-right:32px!important;
}
.ps-dashboard-grid{
  grid-template-columns:repeat(4,minmax(180px,1fr))!important;
}
.ps-recent-card,
.ps-stat-card,
.ps-trial-banner{max-width:100%!important;}
.ps-scan-row{min-width:0!important;}
.ps-scan-main{min-width:0!important;overflow:hidden!important;}
.ps-scan-title{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.panel-head,.page-header,.topbar{background:transparent!important;}

@media (max-width:980px){
  .ps-dashboard-grid{grid-template-columns:repeat(2,minmax(180px,1fr))!important;}
}
@media (max-width:760px){
  :root{--ps-sidebar-closed:48px;--ps-sidebar-open:224px;}
  .main.ps-main,.main{margin-left:var(--ps-sidebar-closed)!important;width:calc(100vw - var(--ps-sidebar-closed))!important;}
  body.ps-sidebar-expanded .main.ps-main,body.ps-sidebar-expanded .main,body.ps-sidebar-pinned .main.ps-main,body.ps-sidebar-pinned .main{margin-left:var(--ps-sidebar-closed)!important;width:calc(100vw - var(--ps-sidebar-closed))!important;}
  .ps-dashboard-page{padding-left:18px!important;padding-right:18px!important;}
  .ps-dashboard-grid{grid-template-columns:1fr!important;}
}
