/* Premium glassmorphism sidebar — replaces the flat admin-template nav look.
   Only touches presentation (aside/nav/button chrome); every data-view/data-extra
   attribute stays exactly as studio.js/extras.js/media.js expect, so routing and
   click-handling are untouched. Loaded after studio.css so these rules win the
   cascade without needing !important everywhere. */

aside {
  background: radial-gradient(circle at 20% -10%, #3a1a5c33, transparent 55%), linear-gradient(180deg, #120a1e, #07040e);
  border-right: 1px solid rgba(177, 60, 255, .14);
  padding: 22px 16px 18px;
  gap: 0;
  transition: width .3s ease, padding .3s ease;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 26px; }
.sidebar-head .brand { padding: 0; }
.sidebar-collapse-toggle {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(177, 60, 255, .22);
  color: #c9b8f0;
  display: grid; place-items: center;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.sidebar-collapse-toggle svg { width: 16px; height: 16px; transition: transform .3s ease; }
.sidebar-collapse-toggle:hover { background: rgba(177, 60, 255, .18); box-shadow: 0 0 16px rgba(177, 60, 255, .35); }

aside nav { display: flex; flex-direction: column; gap: 22px; }
.nav-section { display: flex; flex-direction: column; gap: 5px; }
.nav-section-label {
  font: 700 10px Manrope, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7c6f95;
  padding: 0 14px;
  margin-bottom: 3px;
}

aside nav button, .sidebar-feedback-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: #9992ac;
  font: 500 12.5px Inter, sans-serif;
  text-align: left;
  transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
aside nav button span, .sidebar-feedback-cta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
aside button svg {
  width: 22px; height: 22px; flex: 0 0 auto;
  transition: transform .3s ease, filter .3s ease;
}
aside nav button:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(177, 60, 255, .12), rgba(177, 60, 255, .02));
  border-color: rgba(177, 60, 255, .24);
  color: #fff;
  box-shadow: 0 8px 20px rgba(120, 40, 200, .18);
}
aside nav button:hover svg { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(177, 60, 255, .6)); }

aside nav button.active {
  background: linear-gradient(145deg, rgba(177, 60, 255, .24), rgba(120, 40, 200, .08));
  border: 1px solid rgba(200, 120, 255, .4);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 26px rgba(177, 60, 255, .16),
    0 0 0 1px rgba(177, 60, 255, .12),
    0 10px 28px rgba(150, 50, 220, .26);
}
aside nav button.active svg { filter: drop-shadow(0 0 8px rgba(200, 140, 255, .9)); }
aside nav button.active:hover { transform: translateY(-2px); }

aside nav button:active, .sidebar-feedback-cta:active { animation: navPulse .3s ease; }
@keyframes navPulse {
  0% { box-shadow: 0 0 0 0 rgba(177, 60, 255, .45); }
  100% { box-shadow: 0 0 0 14px rgba(177, 60, 255, 0); }
}

.nav-badge {
  flex: 0 0 auto;
  font: 700 8px Manrope, sans-serif;
  padding: 3px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.nav-badge-pro { background: linear-gradient(135deg, #ffd76a, #e8b64d); color: #3a2a06; }
.nav-badge-live { background: linear-gradient(135deg, #ff5578, #c81e3a); color: #fff; }
.nav-badge-ai { background: linear-gradient(135deg, #5aa9ff, #2a6ae8); color: #fff; }

.aside-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.sidebar-feedback-cta {
  background: linear-gradient(145deg, rgba(177, 60, 255, .2), rgba(120, 40, 200, .06));
  border: 1px solid rgba(200, 120, 255, .32);
  color: #f0dcff;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px rgba(140, 40, 210, .2);
}
.sidebar-feedback-cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 30px rgba(177, 60, 255, .4);
}
.sidebar-feedback-cta svg { filter: drop-shadow(0 0 6px rgba(200, 140, 255, .8)); }

.aside-bottom > button[data-view="settings"] { color: #9992ac; }
.aside-bottom .user { border-top: 1px solid rgba(177, 60, 255, .12); margin-top: 6px; padding: 16px 7px 0; }

/* Collapsed state: icon-only, no wrap, no layout shift on the main content grid */
body.sidebar-collapsed { grid-template-columns: 76px 1fr; }
aside.collapsed { width: 76px; padding-left: 12px; padding-right: 12px; }
aside.collapsed .nav-section-label,
aside.collapsed nav button span,
aside.collapsed .nav-badge,
aside.collapsed .sidebar-feedback-cta span,
aside.collapsed .brand b,
aside.collapsed .user span { display: none; }
aside.collapsed nav button, aside.collapsed .sidebar-feedback-cta { justify-content: center; padding: 12px; }
aside.collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }