/* Shared MINOCALE navigation, independent of the currently visible screen. */
body {
  --mn-surface: #ffffff;
  --mn-soft: #f3f7f0;
  --mn-paper: #f0f5ee;
  --mn-ink: #244233;
  --mn-muted: #6c8172;
  --mn-line: #dce7d9;
  --mn-accent: #245b43;
  --mn-selected: #e7f1e2;
  --mn-shadow: 0 12px 36px -20px #245b4340;
}
body.dark-mode {
  --mn-surface: #192c22;
  --mn-soft: #223b2c;
  --mn-paper: #101e18;
  --mn-ink: #e4efe4;
  --mn-muted: #afc3b0;
  --mn-line: #36523e;
  --mn-accent: #b9ddbf;
  --mn-selected: #304e39;
  --mn-shadow: 0 12px 36px -20px #000a;
}
body .sidebar {
  background: var(--mn-surface);
  color: var(--mn-ink);
  border-right: 1px solid var(--mn-line);
  border-radius: 0 22px 22px 0;
  box-shadow: var(--mn-shadow);
}
body .sidebar-overlay { background: #10251b59; backdrop-filter: blur(3px); }
body.dark-mode .sidebar-overlay { background: #07130da8; }
body .sidebar h2 { color: var(--mn-ink); border-color: var(--mn-line); }
body .sidebar-close-btn { color: var(--mn-accent); border-radius: 10px; }
body .sidebar .menu-list { scrollbar-color: #a6c1a5 var(--mn-surface); }
body .sidebar .menu-list::-webkit-scrollbar-track { background: var(--mn-surface); }
body .sidebar .menu-list::-webkit-scrollbar-thumb { background: var(--mn-line); }
body .sidebar .menu-item-btn {
  color: var(--mn-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body .sidebar .menu-item-btn svg { color: var(--mn-accent); stroke-width: 1.7; }
body .sidebar .menu-divider { border-color: var(--mn-line); }
body .sidebar .menu-item-btn:hover,
body .sidebar .menu-item-btn:focus-visible,
body .sidebar-close-btn:hover {
  background: var(--mn-soft);
  color: var(--mn-accent);
  transform: none;
  box-shadow: none;
}
body:has(#calendarView:not([style*="display: none"])) .sidebar [onclick="showCalendarView()"],
body:has(#trendsView[style*="display: flex"]) .sidebar [onclick="showTrendsView()"],
body:has(#ratioView[style*="display: flex"]) .sidebar [onclick="showRatioView()"],
body:has(#averageView[style*="display: flex"]) .sidebar [onclick="showAverageView()"],
body:has(#analysisView[style*="display: flex"]) .sidebar [onclick="showAnalysisView()"],
body:has(#safeView[style*="display: flex"]) .sidebar [onclick="showSafeView()"],
body:has(#myPageView[style*="display: flex"]) .sidebar [onclick="showMyPageView()"] {
  background: var(--mn-selected);
  color: var(--mn-accent);
  border-color: var(--mn-line);
}
body .menu-btn { color: var(--mn-accent); }
body #darkModeBtn {
  background: var(--mn-soft) !important;
  color: var(--mn-accent) !important;
  border-color: var(--mn-line) !important;
  box-shadow: none !important;
}
body .filter-menu-popup,
body.dark-mode .filter-menu-popup {
  color: var(--mn-ink);
  background: var(--mn-surface);
  border-color: var(--mn-line);
  border-radius: 15px;
  box-shadow: var(--mn-shadow);
}
body .filter-menu-popup :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--mn-accent); }
body .filter-menu-popup .btn-blue { background: var(--mn-accent); border-color: var(--mn-accent); color: var(--mn-surface); }
body .bottom-nav,
body.dark-mode .bottom-nav {
  background: color-mix(in srgb, var(--mn-surface) 94%, transparent);
  border-color: var(--mn-line);
  box-shadow: var(--mn-shadow);
}
body .bottom-nav-indicator:not(.is-dragging),
body.dark-mode .bottom-nav-indicator:not(.is-dragging) {
  background: var(--mn-soft);
  border-color: var(--mn-line);
  box-shadow: none;
}
body .bottom-nav-item,
body.dark-mode .bottom-nav-item { color: var(--mn-muted); }
body .bottom-nav-item.active,
body.dark-mode .bottom-nav-item.active { color: var(--mn-accent); }
body.dark-mode .bottom-nav-item.active[data-view="calendar"] .nav-icon svg polyline { stroke: var(--mn-soft); }
body:has(#managementView[style*="display: flex"]) { background: var(--mn-paper); }
body:has(#managementView[style*="display: flex"]) > .container {
  background: var(--mn-surface) !important;
  border: 1px solid var(--mn-line);
  box-shadow: var(--mn-shadow) !important;
}
body #managementView .management-card {
  background: var(--mn-surface);
  color: var(--mn-ink);
  border: 1px solid var(--mn-line);
  border-radius: 19px;
  box-shadow: 0 4px 14px -9px #245b4326;
}
body #managementView .management-card svg { stroke: var(--mn-accent); }
body #managementView .management-card:hover {
  background: var(--mn-soft);
  border-color: var(--mn-accent);
  box-shadow: none;
  transform: translateY(-2px);
}
body :is(.sidebar,.bottom-nav,#managementView,.filter-menu-popup) :is(button,a,input,select):focus-visible {
  outline: 2px solid #7da887;
  outline-offset: 3px;
}
@media(prefers-reduced-motion:reduce) {
  body .sidebar, body .sidebar .menu-item-btn { transition: none; }
  body #managementView .management-card:hover { transform: none; }
}
