.app-shell { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  background: transparent;
}
.topbar .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-text); font-weight: 700; font-size: 1.5rem; }
.topbar .nav { display: flex; align-items: center; gap: 0.5rem; }
.topbar .nav a { color: var(--color-text); border: 1px solid var(--color-bg-secondary); padding: .5rem .75rem; border-radius: var(--radius-sm); text-decoration: none; background-color: var(--color-bg-secondary); text-align: center;}
.topbar .nav a:hover { color:  var(--color-text); background: var(--color-accent);  border: 1px solid var(--color-accent);}
.topbar .nav a.active { background:  var(--color-accent); border-color:  var(--color-accent); color:  var(--color-text);  }

.content { padding: 1rem; }
@media (min-width: 992px){ .content { padding: 2rem; } }

/* Hide navigation links on mobile for homepage */
@media (max-width: 767px) {
  .topbar .nav {
    display: none;
  }
  
  .topbar {
    padding: 0.5rem 0 !important;
  }
  
  /* Center logo on mobile */
  .topbar .d-flex {
    justify-content: center !important;
  }
  
  .topbar .brand {
    font-size: 1.5rem;
  }
  
  .topbar .brand-logo {
    height: 40px !important;
  }
}