/* core.css — Global styles for the LifeManagement shell.
 * Loaded on every authenticated page via the server-injected nav bar snippet.
 */

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin:      0;
  padding-top: 56px; /* Reserve space below the fixed nav bar */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Top nav bar ─────────────────────────────────────────────────────────── */
#lm-topnav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         1000;
  height:          56px;
  display:         flex;
  align-items:     center;
  padding:         0 1rem;
  gap:             .25rem;
  background:      #1a1a2e;
  color:           #fff;
  box-shadow:      0 2px 6px rgba(0,0,0,.35);
}

/* ── Brand link ──────────────────────────────────────────────────────────── */
.lm-nav-brand {
  color:           #fff;
  font-weight:     700;
  font-size:       1.1rem;
  text-decoration: none;
  white-space:     nowrap;
  padding:         .375rem .5rem;
  border-radius:   6px;
  margin-right:    .5rem;
  transition:      background .15s;
}
.lm-nav-brand:hover,
.lm-nav-brand.lm-nav-active {
  background: rgba(255,255,255,.12);
  color:      #fff;
}

/* ── Module links container ──────────────────────────────────────────────── */
.lm-nav-links {
  display:     flex;
  align-items: center;
  gap:         .125rem;
  flex:        1;          /* Grow to fill space between brand and right side */
  overflow-x:  auto;
  scrollbar-width: none;   /* Firefox */
}
.lm-nav-links::-webkit-scrollbar { display: none; }

/* ── Generic nav link (used inside .lm-nav-links and .lm-nav-right) ─────── */
.lm-nav-link {
  color:           rgba(255,255,255,.8);
  text-decoration: none;
  padding:         .375rem .75rem;
  border-radius:   6px;
  font-size:       .9rem;
  white-space:     nowrap;
  transition:      background .15s, color .15s;
}
.lm-nav-link:hover {
  background: rgba(255,255,255,.1);
  color:      #fff;
}
.lm-nav-link.lm-nav-active {
  background: rgba(255,255,255,.18);
  color:      #fff;
  font-weight: 600;
}

/* Optional: per-module colour accent on the active link */
.lm-nav-link.lm-nav-active[style*="--lm-nav-color"] {
  box-shadow: inset 0 -2px 0 var(--lm-nav-color, #0d6efd);
}

/* ── Right side (Preferences + Logout) ──────────────────────────────────── */
.lm-nav-right {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Nav button (Logout, etc.) ───────────────────────────────────────────── */
.lm-nav-btn {
  cursor:      pointer;
  background:  transparent;
  border:      1px solid rgba(255,255,255,.5);
  color:       rgba(255,255,255,.85);
  padding:     .3rem .8rem;
  border-radius: 6px;
  font-size:   .875rem;
  line-height: 1.4;
  white-space: nowrap;
  transition:  background .15s, border-color .15s, color .15s;
}
.lm-nav-btn:hover {
  background:    rgba(255,255,255,.12);
  border-color:  rgba(255,255,255,.8);
  color:         #fff;
}

/* ── Responsive: stack / collapse on small screens ──────────────────────── */
@media (max-width: 576px) {
  #lm-topnav { gap: .125rem; padding: 0 .5rem; }

  .lm-nav-brand { font-size: 1rem; margin-right: .25rem; }

  .lm-nav-link  { padding: .3rem .5rem; font-size: .8rem; }

  .lm-nav-btn   { padding: .25rem .55rem; font-size: .8rem; }

  /* Hide the Preferences text label on very small screens */
  .lm-nav-right .lm-nav-link { display: none; }
}