/* Mobile-first defaults */
:root {
  --tap: 44px; /* min tap size */
}

/* Tighten desktop later via media queries */

/* App “standalone” mode trims chrome */
.app-standalone body {
  padding-top: 0;           /* if you have a sticky header */
}
.app-standalone .site-header,
.app-standalone .site-footer,
.app-standalone #globalNav {
  display: none !important; /* hide heavy site chrome */
}

/* Bigger controls on mobile/app 
button.btn, .btn, .form-control, .form-select {
  min-height: var(--tap);
} */
 
.list-group-item, .card {
  border-radius: 14px;
}

/* Optional: bottom action bar for app mode */
.app-standalone .app-bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: grid; grid-auto-flow: column; gap: .5rem;
  padding: .6rem .8rem; background: #fff; border-top: 1px solid #eee;
}

/* Hide the normal site nav in PWA standalone */
.app-standalone .site-nav {
  display: none !important;
}

/* Launchpad tiles */
.launch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 576px) {
  .launch-grid {
    grid-template-columns: 1fr;
  }
}

.launch-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  border-radius: 1rem;
  border: 2px solid var(--bs-border-color, #dee2e6);
  background: #fff;
  text-decoration: none;
  transition: transform .06s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.launch-tile:active { transform: scale(0.98); }
.launch-tile:hover  { background: #f8f9fa; }

.launch-tile i {
  font-size: 1.5rem;
  margin-right: .6rem;
}

.launch-tile span {
  font-weight: 600;
}

/* Optional: a slim top bar in app mode */
.app-standalone .app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 0;
}

/* Optional: bottom bar for quick actions (shown only in app mode) */
.app-standalone .app-bottom-bar {
  position: sticky; /* or fixed if you prefer; see comment below */
  bottom: 0;
  inset-inline: 0;
  padding: .5rem max(env(safe-area-inset-left), 1rem) calc(.5rem + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), 1rem);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  z-index: 1030;
}

/* If you choose position:fixed instead of sticky, add a bottom spacer to avoid covering content */
.app-standalone .with-bottom-pad { padding-bottom: 4.25rem; }
/* --- Base switches --- */
.web-only { display: block; }
.app-only { display: none; }

html.app-standalone .web-only { display: none !important; }
html.app-standalone .app-only { display: block !important; }

/* In PWA, hide your global navbar/footer if desired */
html.app-standalone .navbar,
html.app-standalone footer { display: none !important; }

/* Keep some bottom padding so the fixed bottom bar doesn’t overlap content */
.with-bottom-pad { padding-bottom: 0; }
html.app-standalone .with-bottom-pad { padding-bottom: 84px; }

/* --- Top app bar --- */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: none;            /* default hidden on web */
  justify-content: space-between;
  padding: .5rem .75rem;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
html.app-standalone .app-topbar { display: flex; }

/* --- Bottom app bar --- */
.app-bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  display: none;            /* default hidden on web */
  gap: .5rem;
  padding: .5rem .75rem;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  justify-content: space-around;
}
html.app-standalone .app-bottom-bar { display: flex; }

/* --- Launch tiles --- */
.launch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
}
@media (max-width: 480px) {
  .launch-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.launch-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem;
  padding: 1rem .75rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .75rem;
  text-decoration: none;
}
.launch-tile:hover { background: rgba(13,110,253,.06); }
.launch-tile i { font-size: 1.6rem; }
.launch-tile span { font-weight: 600; font-size: .95rem; }

/* --- Sticky top bar: kill overflow on ancestors & restore look --- */


