/* Minimal static shell CSS to avoid blank screen before JS loads.
   Uses neutral placeholders and familiar class names. */

:root {
  /* Reuse app variables when available, with fallbacks */
  --shell-border: var(--border-light, #e9ecef);
  --shell-bg: var(--bg-secondary, #f8f9fa);
  --shell-fill: var(--bg-surface, #f1f1f1);
  --shell-text: var(--text-primary, #212529);
  --shell-primary: var(--color-primary, #99DA44);
  --shell-dark: var(--bg-dark, #557597);
}

html, body { height: 100%; }
/* Use themed background to avoid white flash in dark */
body { margin: 0; background: var(--bg-primary, #fff); color: var(--shell-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Respect data-theme color scheme for native UI */
[data-theme="dark"] body { color-scheme: dark; }

/* App frame (scoped to avoid leaking into real UI) */
#static-shell.app { display: flex; flex-direction: column; min-height: 100vh; }
#static-shell .header { display: grid; grid-template-columns: 1fr 3fr 1fr; align-items: center; padding: 8px 16px; background: var(--shell-primary); color: #fff; box-shadow: 0 2px 4px var(--black-10, rgba(0,0,0,.1)); border-radius: 0 0 10px 10px; }
#static-shell .header .header-section { display: flex; align-items: center; gap: 8px; }

/* Placeholder blocks (shell-only classes to avoid clashing with .btn) */
#static-shell .shell-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--shell-fill); }
#static-shell .shell-pill { width: 96px; height: 40px; border-radius: 999px; background: var(--shell-fill); }

/* Layout (scoped) */
#static-shell .app-body { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--white-20, rgba(255,255,255,.2)); }
#static-shell .main-navigation { width: 100%; height: 80px; background: var(--shell-dark); color: #fff; position: fixed; bottom: 0; left: 0; z-index: 100; border-top: 1px solid var(--border-medium, #adb5bd); box-shadow: 0 -2px 10px var(--black-20, rgba(0,0,0,.2)); }
#static-shell .main-navigation-content { display: flex; justify-content: space-between; align-items: center; padding: .8rem .5rem; height: 80px; }
#static-shell .main-navigation-menu { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; list-style: none; margin: 0; padding: 0; }
#static-shell .main-navigation-menu li { flex: 1; display: flex; justify-content: center; }
#static-shell .skeleton-nav-item { width: 90%; max-width: 120px; height: 38px; border-radius: 8px; background: var(--shell-fill); }

#static-shell .page { position: relative; flex: 1; padding: 1rem; margin: 0 0 85px 0; background: var(--bg-secondary, #f8f9fa); min-height: calc(100vh - 50px); margin-bottom: 30vh; border-bottom: 1px solid var(--border-strong, #6c757d); border-radius: 0 0 50px 50px; box-shadow: 0 2px 4px var(--black-40, rgba(0,0,0,.4)); }
#static-shell .section-header--page { padding-bottom: 8px; margin-bottom: 12px; }
#static-shell .skeleton-title { width: 220px; height: 28px; border-radius: 8px; background: var(--shell-fill); }
#static-shell .skeleton-line { width: 60%; height: 14px; margin-top: 8px; border-radius: 6px; background: var(--shell-fill); }

#static-shell .panel { background: var(--shell-bg); border: 1px solid var(--shell-border); border-radius: 12px; }
#static-shell .skeleton-panel { height: 140px; margin: 16px 0; }

.dashboard-sidebar { width: 300px; border-left: 1px solid var(--shell-border); padding: 12px; display: none; }

/* Simple pulse */
@media (prefers-reduced-motion: no-preference) {
  #static-shell .skeleton-nav-item,
  #static-shell .skeleton-title,
  #static-shell .skeleton-line,
  #static-shell .skeleton-panel,
  #static-shell .shell-icon,
  #static-shell .shell-pill {
    animation: shell-pulse 1.2s ease-in-out infinite;
  }
}
@keyframes shell-pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }