/* =====================================================
   AniGa – shell.css
   Sidebar, Mobile-Header, Bottom-Nav, Breakpoints
   Teil von style.css — Reihenfolge der <link>-Tags in index.html
   entspricht der Kaskade und darf nicht vertauscht werden.
   ===================================================== */
/* ===== SIDEBAR ===== */
.sidebar
{
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform .3s ease;
}

.sidebar-logo
{
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-icon
{
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.logo-img
{
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.logo-text
{
  font-size: 1.35rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.sidebar-nav
{
  flex: 1; padding: 10px 0;
}
.nav-item
{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  color: var(--text2);
  cursor: pointer;
  transition: all .2s;
  font-size: .93rem; font-weight: 500;
  border: none; background: none; width: 100%; text-align: left;
  border-right: 3px solid transparent;
}
.nav-item:hover
{
  background: var(--bg-hover); color: var(--text);
}
.nav-item.active
{
  background: var(--accent-glow); color: var(--accent); border-right-color: var(--accent);
}
.nav-item-admin
{
  color: var(--error) !important; margin-top: 4px; border-top: 1px solid var(--border);
}
.nav-item-admin:hover
{
  background: rgba(239,83,80,.08) !important; color: var(--error) !important;
}
.nav-item-admin.active
{
  background: rgba(239,83,80,.12) !important; border-right-color: var(--error) !important;
}
.nav-item svg
{
  width: 20px; height: 20px; flex-shrink: 0;
}

.sidebar-user
{
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.user-avatar
{
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: #fff;
  flex-shrink: 0;
}
.user-info
{
  flex: 1; min-width: 0;
}
.user-name
{
  font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-email
{
  font-size: .72rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-logout
{
  background: none; border: none; color: var(--text3);
  padding: 6px; border-radius: 6px;
  display: flex; align-items: center; transition: color .2s;
  flex-shrink: 0;
}
.btn-logout:hover
{
  color: var(--error);
}
.btn-logout svg
{
  width: 18px; height: 18px;
}

.bottom-nav
{
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 100;
}
.bottom-nav-inner
{
  display: flex; height: 100%;
}
.bottom-nav-item
{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--text3);
  cursor: pointer;
  transition: all .2s;
  border: none; background: none;
  font-size: .6rem; font-weight: 500;
}
.bottom-nav-item svg
{
  width: 22px; height: 22px;
}
.bottom-nav-item.active
{
  color: var(--accent);
}
.bottom-nav-item span
{
  line-height: 1;
}

/* ===== MAIN CONTENT ===== */
.main-content
{
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 28px;
  max-width: calc(100vw - var(--sidebar-w));
  min-height: 100vh;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 768px)
{
  .rec-head
  {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .sidebar
  {
    transform: translateX(-100%);
  }
  .bottom-nav
  {
    display: block;
  }
  .main-content
  {
    margin-left: 0;
    max-width: 100%;
    padding: 14px;
    padding-top: 14px;
    padding-bottom: calc(var(--nav-h) + 14px);
  }
}