
/* Apps4You Overhaul */
:root{
  --bg:#0b0c10;
  --bg-elev:#11131a;
  --bg-elev-2:#161922;
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --accent:#ff2ba5; /* neon pink */
  --accent-2:#7b5cff; /* purple */
  --card-radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

html,body{background:var(--bg); color:var(--text);}
a{color:var(--accent);}
.app4you-navbar{
  background: linear-gradient(90deg, rgba(11,12,16,.9), rgba(22,25,34,.9));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.brand-logo{height:28px; width:auto; display:block; filter: drop-shadow(0 2px 8px rgba(255,43,165,.2));}
.brand-logo-small{height:22px;}
.brand-text{font-weight:700; letter-spacing:.2px;}
.sidebar-toggle{border-color:rgba(255,255,255,.15) !important;}

.app4you-sidebar{
  background: var(--bg-elev);
  color: var(--text);
  width: 300px;
}
.app4you-sidebar .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.06);}
.app4you-nav{display:flex; flex-direction:column; gap:6px;}
.app4you-nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:var(--text); text-decoration:none; background:transparent; transition:all .2s ease;
}
.app4you-nav-item:hover{background:var(--bg-elev-2);}
.app4you-nav-item.active{background:linear-gradient(90deg, rgba(123,92,255,.15), rgba(255,43,165,.15)); border:1px solid rgba(255,43,165,.25);}
.app4you-nav-item i{width:18px; text-align:center;}

.app4you-toolbar-wrapper{position:sticky; top:64px; z-index:100; }
.app4you-toolbar{
  background: var(--bg-elev);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.app4you-toolbar h5{margin:0; font-weight:600;}
.app4you-toolbar .btn{border-radius:999px;}
.app4you-toolbar .btn-outline-warning{border-color:#fbbf24; color:#fbbf24;}
.app4you-toolbar .btn-outline-warning:hover{background:#fbbf24; color:#111;}
.app4you-toolbar .btn-outline-danger{border-color:#ef4444; color:#ef4444;}
.app4you-toolbar .btn-outline-danger:hover{background:#ef4444; color:#fff;}

#appsContainer{margin-top: 8px;}
.card{background: var(--bg-elev); border: 1px solid rgba(255,255,255,.06); border-radius: var(--card-radius); box-shadow: var(--shadow);}
.card .card-header{background:transparent; border-bottom:1px solid rgba(255,255,255,.06);}
.card .card-body{color:var(--text);}

.badge{border-radius:999px;}

.btn-primary, .btn-success, .btn-info{border-radius:10px;}
.btn-primary{background: linear-gradient(90deg, var(--accent-2), var(--accent)); border:0;}
.btn-primary:hover{opacity:.9;}
.btn-outline-primary{border-color:var(--accent); color:var(--accent);}
.btn-outline-primary:hover{background:var(--accent); color:#111;}

.text-muted{color: var(--muted) !important;}

body{padding-top:64px;} /* fixed navbar spacing */

@media (min-width:1200px){
  .brand-logo{height:30px;}
}

/* Hide legacy left column now that offcanvas is in place */
#legacySidebarCol{display:none !important;}

/* Pull grid flush to the left once legacy column is hidden */
#appsContainer{margin-left:0 !important;}

/* Optional: reduce outer container horizontal padding if any */
.container, .container-fluid{padding-left:16px; padding-right:16px;}

/* --- Filters-only offcanvas --- */
.app4you-sidebar{
  background: var(--bg-elev);
  color: var(--text);
  width: 320px;
}
.app4you-sidebar .offcanvas-header{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-filters-clone{
  padding-top:10px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
/* Remove any stray app4you-nav spacing if leftover */
.app4you-nav, .app4you-nav-item{display:none !important;}


/* Stats panel used for offcanvas clone */
#offcanvasStats .card{background: var(--bg-elev); border: 1px solid rgba(255,255,255,.06); border-radius: 16px;}
#offcanvasStats .card-header{background: transparent; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 600;}
#offcanvasStats .text-primary{color:#60a5fa !important;}
#offcanvasStats .text-success{color:#34d399 !important;}
#offcanvasStats .text-danger{color:#f87171 !important;}
#offcanvasStats .text-warning{color:#fbbf24 !important;}
