/* ============================================================================
   14 · GUILD SIDEBAR & ADMIN BADGES

   The icon-tile guild sidebar redesign (user shell only) with status pills and
   the collapsed icon rail, plus the admin Sidebar Badges page.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ============================================================================
   GUILD SIDEBAR — redesign + feature-status badges  (user shell only)
   Icon tiles, section-divider labels, glowing/breathing active state, an
   icon-rail collapse toggle, and Coming Soon / Beta / Locked status pills.
   All visuals are scoped to [data-shell="user"] so the admin sidebar keeps
   its existing look.
   ============================================================================ */

/* ── Pinned guild header (server name + collapse toggle) ── */
.sidebar-guildhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.5rem;
  flex-shrink: 0;
}
.sidebar-guildhead-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-collapse-btn {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--text-muted);
  color: var(--text);
}
.sidebar-collapse-btn ion-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Icon tiles ── */
.app-shell[data-shell="user"] .app-sidebar .nav-icon {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: background 0.25s, border-color 0.25s, transform 0.25s, color 0.25s;
}
.app-shell[data-shell="user"] .app-sidebar .nav-icon ion-icon { font-size: 1.05rem; }

/* ── Nav item ── */
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link {
  gap: 0.75rem;
  padding: 0.5rem 0.6875rem;
  margin: 2px 0;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s, transform 0.25s;
}
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateX(3px);
}
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link:hover .nav-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-muted);
  transform: scale(1.06);
  color: var(--text);
}
.app-shell[data-shell="user"] .app-sidebar .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Active state — crimson glow (overrides the global .active rule for this shell) ── */
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link.active {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.22), rgba(153, 27, 27, 0.08)) !important;
  border-color: rgba(220, 38, 38, 0.45);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.22), 0 8px 22px rgba(220, 38, 38, 0.20);
}
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link.active .nav-icon {
  background: linear-gradient(135deg, var(--crimson, #DC2626), var(--crimson-deep, #991B1B));
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4);
}
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link.active .nav-label { font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  .app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link.active {
    animation: sbnav-breathe 3.6s ease-in-out infinite;
  }
  @keyframes sbnav-breathe {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.20), 0 8px 22px rgba(220, 38, 38, 0.16); }
    50%      { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.34), 0 10px 30px rgba(220, 38, 38, 0.30); }
  }
}

/* ── Section labels → divider rows ── */
.app-shell[data-shell="user"] .app-sidebar .sidebar-sub-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem 0.25rem;
  margin: 0.75rem 0 0.25rem;
  opacity: 1;
}
.app-shell[data-shell="user"] .app-sidebar .sidebar-sub-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Status pills (Beta / Coming Soon / Locked) ── */
.nav-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.nav-status ion-icon { font-size: 0.75rem; }
.nav-status.is-beta {
  background: rgba(168, 208, 141, 0.16);
  color: var(--green);
  border: 1px solid rgba(168, 208, 141, 0.34);
}
.nav-status.is-soon {
  background: rgba(240, 177, 50, 0.16);
  color: var(--yellow);
  border: 1px solid rgba(240, 177, 50, 0.34);
}
.nav-status.is-locked {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.32);
}

/* Locked items: dimmed but still clickable (page shows the disabled notice) */
.app-shell[data-shell="user"] .app-sidebar .sidebar-nav-link.nav-locked { opacity: 0.6; }

/* ── Collapsed icon rail (desktop only — mobile uses the off-canvas drawer) ── */
@media (min-width: 901px) {
  .app-shell[data-shell="user"] .app-sidebar { transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1); }
  .app-shell[data-shell="user"] .app-sidebar.collapsed { width: 84px; }

  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-nav-link {
    justify-content: center;
    padding: 0.5rem;
  }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .nav-label,
  .app-shell[data-shell="user"] .app-sidebar.collapsed .nav-status { display: none; }

  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-sub-label {
    justify-content: center;
    font-size: 0;
    padding: 0.5rem 0;
    margin: 0.5rem 0 0.25rem;
  }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-sub-label::after { display: none; }

  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-guildhead-name { display: none; }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-guildhead {
    justify-content: center;
    padding: 0.75rem 0 0.5rem;
  }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-collapse-btn ion-icon { transform: rotate(180deg); }

  /* A tiny status dot on the icon tile stands in for the hidden pill when collapsed */
  .app-shell[data-shell="user"] .app-sidebar.collapsed .nav-icon { position: relative; }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-nav-link.has-status .nav-icon::after,
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-nav-link.nav-locked .nav-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--bg);
  }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-nav-link[data-status="beta"] .nav-icon::after { background: var(--green); }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-nav-link[data-status="coming_soon"] .nav-icon::after { background: var(--yellow); }
  .app-shell[data-shell="user"] .app-sidebar.collapsed .sidebar-nav-link.nav-locked .nav-icon::after { background: var(--red); }
}

/* No collapse toggle on mobile (the sidebar is an off-canvas drawer there) */
@media (max-width: 900px) {
  .sidebar-collapse-btn { display: none; }
}

/* ============================================================================
   ADMIN — Sidebar Badges section (/admin/killswitch)
   Dense horizontal grid of per-menu-item cards, each with a status dropdown.
   (Merged into the Kill Switch page — there is no separate Sidebar Badges page.)
   ============================================================================ */
.nb-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.nb-note ion-icon { font-size: 1rem; }

/* auto-fill packs as many cards per row as fit, so more options show per screen */
.nb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 0.875rem;
  align-items: start;
}

.nb-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.9rem 1rem;
  overflow: visible; /* never clip the open select popup */
}
.nb-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.35rem;
}
.nb-card-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.nb-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.nb-section {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-secondary);
}
.nb-card-meta code { font-size: 0.7rem; }
/* When a card's dropdown is open, lift it so the popup overlays neighbour cards cleanly */
.nb-card:has(.cs-open) { position: relative; z-index: 5; }
.nb-card .cs-trigger { padding: 0.5rem 0.7rem; font-size: 0.8125rem; }