/* === NaturaIQ grouped side-panel === */

.nav-rail {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 248px;
  background: #0a0f1c;
  border-right: 1px solid #1f2937;
  color: #cbd5e1;
  display: flex; flex-direction: column;
  z-index: 50;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.nav-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px 16px;
  border-bottom: 1px solid #1f2937;
  text-decoration: none; color: #f3f4f6;
  font-weight: 700; font-size: 16px;
}
.nav-brand-mark { font-size: 20px; }
.nav-brand-accent { color: #22c55e; }

.nav-scroll {
  flex: 1; overflow-y: auto; padding: 6px 0 12px 0;
  scrollbar-width: thin;
  scrollbar-color: #1f2937 transparent;
}
.nav-scroll::-webkit-scrollbar { width: 6px; }
.nav-scroll::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; }

/* === Section (collapsible) === */
.nav-section { margin: 2px 0; }
.nav-section-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 14px 9px 14px;
  background: transparent; border: 0; cursor: pointer;
  color: #e2e8f0; text-align: left;
  font: inherit; font-weight: 600;
  border-left: 3px solid transparent;
  transition: background 80ms, border-color 80ms;
}
.nav-section-head:hover { background: #111827; }
.nav-section-head[style*="--sec-color"] { border-left-color: var(--sec-color); }
.nav-section-icon { font-size: 16px; width: 22px; text-align: center; flex: 0 0 22px; }
.nav-section-text { flex: 1; display: flex; flex-direction: column; }
.nav-section-label { font-size: 13px; letter-spacing: .01em; }
.nav-section-sub   { font-size: 10.5px; color: #94a3b8; font-weight: 400; }
.nav-section-caret { font-size: 11px; color: #64748b; transition: transform 120ms; }
.nav-section.collapsed .nav-section-caret { transform: rotate(-90deg); }
.nav-section.collapsed .nav-section-body   { display: none; }

/* === Single-link sections (Dashboard) === */
.nav-single {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  text-decoration: none; color: #e2e8f0;
  font-weight: 600; font-size: 13px;
  border-left: 3px solid transparent;
}
.nav-single:hover { background: #111827; }
.nav-single.active { background: #111827; color: #f3f4f6; border-left-color: #22c55e; }

/* === Module (collapsible child) === */
.nav-section-body { padding: 4px 0 8px 0; }
.nav-module { margin: 4px 0; }
.nav-module-head {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 3px 26px;
  color: #94a3b8; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.nav-module-icon { font-size: 13px; }
.nav-items { list-style: none; margin: 0; padding: 0; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 38px;
  color: #cbd5e1; text-decoration: none;
  font-size: 12.5px;
  border-left: 3px solid transparent;
  transition: background 80ms, color 80ms, border-color 80ms;
}
.nav-item:hover { background: #111827; color: #f3f4f6; }
.nav-item.active {
  background: #0f172a;
  color: #ffffff;
  border-left-color: currentColor;
  font-weight: 600;
}
.nav-item-icon { font-size: 13px; width: 16px; text-align: center; flex: 0 0 16px; }
.nav-item-label { flex: 1; }
.nav-item-soon  { color: #64748b; }
.nav-item-soon .nav-item-label { font-style: italic; }
.nav-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px;
  background: #1f2937; color: #94a3b8;
  text-transform: uppercase;
}

/* === Footer === */
.nav-foot {
  border-top: 1px solid #1f2937;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.nav-user { display: flex; flex-direction: column; line-height: 1.2; }
.nav-user-name { font-weight: 600; color: #f3f4f6; font-size: 12.5px; }
.nav-user-role { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; }
.btn-lock {
  display: inline-block; text-align: center;
  background: #1f2937; color: #e2e8f0;
  padding: 6px 10px; border-radius: 4px;
  text-decoration: none; font-size: 12px;
  border: 1px solid #374151;
}
.btn-lock:hover { background: #374151; color: #f3f4f6; }

/* === Main content area === */
.app-main {
  margin-left: 248px;
  min-height: 100vh;
  background: #f3f4f6;
  color: #1f2937;
}

/* === Responsive === */
@media (max-width: 900px) {
  .nav-rail { width: 200px; }
  .app-main { margin-left: 200px; }
}
@media (max-width: 640px) {
  .nav-rail { width: 64px; }
  .nav-section-text, .nav-item-label, .nav-section-sub, .nav-user, .nav-section-caret { display: none; }
  .nav-section-head, .nav-single, .nav-item { padding-left: 14px; padding-right: 8px; justify-content: center; }
  .nav-item { padding-left: 14px; }
  .app-main { margin-left: 64px; }
}