/* Light Style (the Default, Travis Oct 23 2026 "Default Light"): a light left menu and bottom tab bar to match the light
   pages, from the menu mockup (light background, dark text, green accents). Linked only when the company's Style is
   Light (style_theme.php). Every other Style keeps assets/style.css as it is. Colors come from the shared tokens. */
:root {
  --menu-bg: #FFFFFF;
  --menu-ink: #1F2328;
  --menu-soft: #4B5158;
  --menu-head: #5F656C;
  --menu-group: #EEF2EC;
  --menu-hover: #F1F6EE;
  --menu-on: #E6F4DF;
  --menu-line: #E3E6E9;
}
.side { background: var(--menu-bg); color: var(--menu-ink); border-right: 1px solid var(--menu-line); box-shadow: inset -3px 0 0 var(--grass); }
.brand { color: var(--menu-ink); }
.gear { color: var(--menu-soft); }
.side nav a { color: var(--menu-ink); }
@media (hover: hover) { .side nav a:not(.active):hover { background: var(--menu-hover); } }
.side nav a.active, .side nav a.sub.active { background: var(--menu-on); color: var(--menu-ink); box-shadow: inset 3px 0 0 var(--grass); }
.side nav a.sub { color: var(--menu-soft); }
.nav-fold summary { color: var(--menu-head); background: var(--menu-group); margin-top: 2px; }
.nav-fold summary::after { border-color: var(--menu-head); }
.nav-fold summary:hover { background: var(--menu-hover); color: var(--menu-ink); }
.nav-subfold { border-left-color: var(--menu-line); }
.nav-subfold > summary { color: var(--menu-ink); background: transparent; }
.side .tabs.sides { background: var(--menu-group); }
.side .tabs.sides a { color: var(--menu-ink); }
.side .tabs.sides a:hover { background: var(--menu-hover); color: var(--menu-ink); }
.logout, .version { color: var(--menu-soft); }
.logout:hover, .side button.logout:hover, .version:hover { background: var(--menu-hover); color: var(--menu-ink); }
.logout.logout-all { color: var(--muted); }
@media (max-width: 800px) {
  .phone-dock { background: var(--menu-bg); border-top: 1px solid var(--menu-line); box-shadow: inset 0 3px 0 var(--grass), 0 -4px 16px rgba(16, 24, 40, .06); }
  .phone-dock a, .phone-dock button { color: var(--menu-soft); }
  .phone-dock button:hover, .phone-dock button:focus, .phone-dock button:active { color: var(--menu-soft) !important; }
  .phone-dock .on, .phone-dock a.on, .phone-dock a:hover { color: var(--grass-ink, #2E8B1E); }
  body.nav-open .phone-dock #dock-menu, body.nav-open .phone-dock #dock-menu:hover, body.nav-open .phone-dock #dock-menu:focus, body.nav-open .phone-dock #dock-menu:active { color: var(--menu-ink) !important; }
}