html, body { height: 100%; }
body { margin: 0; }

/* --- Shell: sidebar + main --- */
.csx-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

/* --- Sidebar --- */
.csx-sidebar {
  width: 260px;
  flex: 0 0 260px;
  padding: 16px 14px;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

/* Remove bullets + spacing */
.csx-sidebar ul,
.csx-sidebar ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.csx-sidebar li { margin: 0; padding: 0; }

/* Sidebar links */
.csx-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  color: rgba(255,255,255,0.90);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.csx-sidebar a:hover { background: rgba(255,255,255,0.08); }

.csx-sidebar a.active,
.csx-sidebar .active > a {
  background: rgba(0, 255, 160, 0.12);
  outline: 1px solid rgba(0, 255, 160, 0.25);
}

/* Fix full-width "green bar" type elements */
.csx-sidebar .badge,
.csx-sidebar .pill,
.csx-sidebar .user-pill,
.csx-sidebar .username,
.csx-sidebar .status-bar {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  box-sizing: border-box;
  border-radius: 12px;
}

/* optional: force inline chip */
.csx-sidebar .csx-inline {
  width: auto !important;
  display: inline-flex !important;
}

/* --- Main content --- */
.csx-main {
  flex: 1 1 auto;
  padding: 28px 28px 40px;
  min-width: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .csx-shell { flex-direction: column; }
  .csx-sidebar {
    width: auto;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}