/* Shared sidebar + content layout for Settings, Admin, and similar pages */
.settings-body {
  display: flex;
  height: calc(100vh - var(--nav-total-height, 90px) - var(--footer-height, 32px));
}

.settings-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  background: var(--theme-surface, #f5f5f5);
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--theme-background, white);
  border-right: 1px solid var(--theme-border, #e5e5e5);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

/* Navigation sections */
.nav-section { margin: 4px 0; border-bottom: 1px solid var(--theme-border, #eee); }
.nav-section:last-child { border-bottom: none; }
.nav-section-header {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--theme-text-secondary, #999); text-transform: uppercase;
}
.nav-section-header.collapsible { cursor: pointer; transition: background 0.2s; }
.nav-section-header.collapsible:hover { background: var(--theme-surface, #f8f9fa); }
.nav-section-header.entity-named {
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--theme-primary, #667eea); padding: 10px 16px;
  background: var(--theme-neutral-alt, #f0f4ff); border-left: 3px solid var(--theme-primary, #667eea);
}
.nav-section-icon { font-size: 14px; flex-shrink: 0; }
.nav-section-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-section-collapse-icon { margin-left: auto; transition: transform 0.2s; font-size: 10px; flex-shrink: 0; }
.nav-section.collapsed .nav-section-collapse-icon { transform: rotate(-90deg); }
.nav-section-items { display: block; }
.nav-section.collapsed .nav-section-items { display: none; }

/* Nav items */
.nav-item {
  padding: 6px 16px 6px 40px; cursor: pointer; font-size: 14px;
  color: var(--theme-text, #555); border-left: 3px solid transparent; transition: all 0.2s;
}
.nav-item:hover { background: var(--theme-surface, #f5f7fa); color: var(--theme-primary, #667eea); }
.nav-item.active {
  background: var(--theme-neutral-alt, #f0f4ff); color: var(--theme-primary, #667eea);
  border-left-color: var(--theme-primary, #667eea); font-weight: 500;
}

/* Sidebar overlay */
.sidebar-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 998;
}
.sidebar-overlay.visible { display: block; }

/* Sidebar toggle button — hidden at desktop where sidebar is visible */
.sidebar-toggle {
  display: none;
  align-items: center; gap: 8px;
  padding: 10px 14px; margin: 0 0 16px;
  background: var(--theme-background, white);
  border: 1px solid var(--theme-border, #e5e5e5);
  border-radius: 8px;
  color: var(--theme-text, #333);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.sidebar-toggle:hover { background: var(--theme-surface, #f5f7fa); border-color: var(--theme-primary, #667eea); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--theme-primary, #667eea); outline-offset: 2px; }
.sidebar-toggle-icon { font-size: 18px; line-height: 1; }

/* Tablet */
@media (max-width: 1024px) {
  .sidebar { position: fixed; top: var(--nav-total-height, 90px); bottom: var(--footer-height, 32px); left: 0; z-index: 999; transform: translateX(-280px); transition: transform 0.3s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
  .sidebar.open { transform: translateX(0); }
  .settings-content { width: 100%; }
  .sidebar-toggle { display: inline-flex; }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar { width: 100%; max-width: none; top: 0; bottom: 0; transform: translateX(-100%); z-index: 100002; }
  .sidebar.open { transform: translateX(0); }
  .settings-content { padding: 12px; }
}