/* layout.css — App layout and left sidebar */

/* ---------------- APP LAYOUT & SIDEBAR ---------------- */
.app-container {
  display: flex;
  flex: 1;
  height: calc(100vh - 60px);
  position: relative;
}

sidebar {
  width: 90px;
  background-color: var(--card-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 15px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -90px;
    z-index: 15;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
  }
  sidebar.open {
    left: 0;
  }
}

.nav-btn {
  width: 64px;
  height: 64px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  gap: 2px;
}

.nav-btn i { font-size: 1.2rem; }

/* When the profile dropdown opens over the sidebar, the buttons slide down out of its way
   (--sidebar-shift is set by syncSidebarShift() in js/header-menus.js). It's a visual move only, so the
   buttons keep their size on short windows (they just run off the bottom until the menu closes).
   Uses `translate` (not `transform`) so it stacks with the hover effect. Change 0.5s to speed up / slow down. */
#sidebar .nav-btn {
  translate: 0 var(--sidebar-shift, 0px);
  transition: all 0.2s ease, translate 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch {
  position: fixed;
  left: 106px;
  bottom: 18px;
  z-index: 20;
  width: 68px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}
.theme-switch i { font-size: 1.3rem; z-index: 1; }
.theme-switch .fa-moon { color: var(--neon-blue); }
.theme-switch .fa-sun { color: var(--neon-orange); }
.theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--text-main);
  opacity: 0.18;
  transition: transform 0.2s ease;
}
:root[data-theme="light"] .theme-switch-knob { transform: translateX(34px); }
@media (max-width: 640px) { .theme-switch { left: 16px; } }
textarea.auth-input { resize: vertical; min-height: 90px; font-family: inherit; }
.admin-tab-active { outline: 2px solid var(--neon-green); }