/* Supabase-style: collapsed icons → labels on hover */
#app-rail:hover {
  flex: 0 0 var(--rail-width);
  width: var(--rail-width);
  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08);
}

[data-admin-theme="dark"] #app-rail:hover {
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45);
}

.rail-logo-text,
.rail-item-label,
.rail-lang {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    max-width var(--duration-slow) var(--ease-out),
    margin var(--duration-slow) var(--ease-out);
}

#app-rail:hover .rail-logo {
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
}

#app-rail:hover .rail-item {
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
}

#app-rail:hover .rail-logo-text,
#app-rail:hover .rail-item-label,
#app-rail:hover .rail-lang {
  opacity: 1;
  max-width: 160px;
  pointer-events: auto;
}

@media (max-width: 640px) {
  /* Labels/width for the off-canvas drawer are handled in responsive.css.
     Keep this block from forcing a permanently icon-only rail on phones. */
  #app-rail:hover {
    box-shadow: none;
  }
}