/* Marsala Client Portal — PWA bootstrap styles (squad-pwa)
   Loaded as a plain static stylesheet so the splash shell paints before the
   app bundle arrives. Uses the app's semantic tokens when present and falls
   back to the same values per theme while the token sheet is still loading. */

/* ---------- progressive shell (static splash inside #root, wiped on mount) */
.mp-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--background, #f4f6f9);
  color: var(--foreground, #1f2733);
}
:root[data-theme='dark'] .mp-splash {
  background: var(--background, #0b1420);
  color: var(--foreground, #e8edf4);
}
.mp-splash-bar {
  height: 3.5rem;
  flex: none;
  background: var(--primary, #051937);
}
:root[data-theme='dark'] .mp-splash-bar {
  background: var(--primary, #0e2138);
}
.mp-splash-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}
.mp-splash-mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: #051937;
  color: #ffffff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.75rem;
  line-height: 3.5rem;
  text-align: center;
}
.mp-splash-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  color: var(--heading, #051937);
}
:root[data-theme='dark'] .mp-splash-title {
  color: var(--heading, #d3e2f4);
}
.mp-splash-sub {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground, #55606e);
}
:root[data-theme='dark'] .mp-splash-sub {
  color: var(--muted-foreground, #a3b1c2);
}
.mp-splash-spinner {
  margin-top: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 2px solid var(--border, #d3d9e0);
  border-top-color: var(--accent, #004d7a);
  animation: mp-spin 0.8s linear infinite;
}
:root[data-theme='dark'] .mp-splash-spinner {
  border-color: var(--border, #2b3d54);
  border-top-color: var(--accent, #5aa6d8);
}
@keyframes mp-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-splash-spinner { animation: none; }
}

/* ---------- offline banner ("showing the last saved data") */
.mp-offline-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); /* clears mobile tab bar */
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  background: var(--warning-soft, #fdf1dd);
  color: var(--warning, #8a5300);
  border-top: 1px solid var(--border, #d3d9e0);
  border-bottom: 1px solid var(--border, #d3d9e0);
}
:root[data-theme='dark'] .mp-offline-banner {
  background: var(--warning-soft, #33250d);
  color: var(--warning, #e0af52);
  border-color: var(--border, #2b3d54);
}
.mp-offline-banner.is-offline { display: flex; }
.mp-offline-banner svg { flex: none; }
/* Signed-out views have no tab bar — drop the clearance. Browsers without
   :has() keep the (safe) cleared position. */
body:not(:has(nav[aria-label='Sections'])) .mp-offline-banner {
  bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) {
  .mp-offline-banner,
  body:not(:has(nav[aria-label='Sections'])) .mp-offline-banner { bottom: 0; } /* desktop: no bottom tab bar */
}

/* ---------- view transitions between tabs (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(mp-main) {
    animation: mp-vt-out 120ms cubic-bezier(0.2, 0, 0, 1) both;
  }
  ::view-transition-new(mp-main) {
    animation: mp-vt-in 200ms cubic-bezier(0.2, 0, 0, 1) both;
  }
  @keyframes mp-vt-out {
    to { opacity: 0; }
  }
  @keyframes mp-vt-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}