/* ═══════════════════════════════════════════════════════════════ */
/* Simple mode (2026-09-23) — 5-item nav for non-technical users    */
/* body.ui-mode-simple is toggled by core/tabs.js applyUiMode().    */
/* Anything marked .simple-hide disappears in Simple mode; the      */
/* Advanced toggle in the topbar brings the full UI back.           */
/* ═══════════════════════════════════════════════════════════════ */

body.ui-mode-simple .simple-hide {
  display: none !important;
}

/* .nav-item sets display:flex in rainbow-layout.css, which loads AFTER
   tailwind's .hidden and therefore beat it (Master / Setup / Simple-mode
   hiding all rely on .hidden). Same specificity, so make it explicit. */
.sidebar-nav .nav-item.hidden,
.settings-tab-btn.hidden {
  display: none !important;
}

/* Topbar Simple / Advanced pill */
#ui-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#ui-mode-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
}

#ui-mode-toggle .ui-mode-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #cbd5e1;
}

body.ui-mode-simple #ui-mode-toggle .ui-mode-dot {
  background: #22c55e;
}

/* Simple mode: flat nav, no group headers, a little more breathing room */
body.ui-mode-simple .sidebar-nav .nav-item {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Settings sub-nav in Simple mode: hide groups that lost every button */
body.ui-mode-simple .settings-nav-group.simple-empty {
  display: none;
}