/* ==========================================================================
   Aven — Native App Shell
   A Material-You-inflected component layer laid over the existing Aven
   brand tokens (--pink/--lime/--amber/--teal from style.css), so the
   dashboard reads like an installed Android app: a fixed bottom tab bar,
   an elevated app bar, tactile card "sheets" with real shadow depth
   instead of hairline borders, and a floating action button for the
   primary action on each screen. Reuses the existing brand palette on
   purpose — the redesign is structural (native app chrome), not a
   re-skin of the brand.
   ========================================================================== */

:root {
  --app-bar-h: 56px;
  --bottom-nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --elevation-1: 0 1px 2px rgba(33, 27, 54, 0.06), 0 1px 1px rgba(33, 27, 54, 0.04);
  --elevation-2: 0 2px 6px rgba(33, 27, 54, 0.08), 0 1px 2px rgba(33, 27, 54, 0.06);
  --elevation-3: 0 8px 24px rgba(33, 27, 54, 0.14), 0 2px 6px rgba(33, 27, 54, 0.08);
  --radius-sheet: 20px;
  --radius-card: 16px;
}

.app-shell {
  min-height: 100vh;
  background: var(--bg, #FBF9F5);
  padding-top: calc(var(--app-bar-h) + var(--safe-top));
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);
}

/* ---- App bar ---- */
.app-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--app-bar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 16px; padding-right: 16px;
  background: var(--bg-card, #fff);
  box-shadow: var(--elevation-1);
  z-index: 40;
}
.app-bar-title { font-weight: 700; font-size: 1.05rem; color: var(--text, #211B36); }
.app-bar-action {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim, #625C79);
  transition: background .15s ease;
}
.app-bar-action:active { background: var(--pink-dim, rgba(124,111,240,.1)); }

/* ---- Bottom nav ---- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  background: var(--bg-card, #fff);
  box-shadow: 0 -2px 12px rgba(33, 27, 54, 0.08);
  z-index: 40;
}
.bottom-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-faint, #9891AC);
  font-size: 0.68rem;
  font-weight: 600;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--pink, #7C6FF0); }
.bottom-nav-item.active::before {
  content: '';
  position: absolute; top: 2px; width: 28px; height: 3px; border-radius: 3px;
  background: var(--pink, #7C6FF0);
}

/* ---- Elevated cards ("sheets") ---- */
.sheet {
  background: var(--bg-card, #fff);
  border-radius: var(--radius-sheet);
  box-shadow: var(--elevation-2);
  padding: 20px;
}
.tile {
  background: var(--bg-card, #fff);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 16px;
  transition: box-shadow .15s ease, transform .12s var(--ease-spring, ease);
}
.tile:active { box-shadow: var(--elevation-2); transform: scale(0.99); }
@media (hover: hover) {
  .tile:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ---- Floating action button ---- */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink, #7C6FF0), var(--amber, #E8875B));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elevation-3);
  border: none; cursor: pointer;
  z-index: 39;
  transition: transform .12s var(--ease-spring, ease);
}
.fab:active { transform: scale(0.94); }
@media (hover: hover) {
  .fab:hover { transform: scale(1.06) translateY(-2px); }
}

/* ---- Section header (used above tile-grids) ---- */
.app-section-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-faint, #9891AC);
  margin: 24px 4px 10px;
  display: flex; align-items: center; gap: 8px;
}
.app-section-title::before {
  content: '';
  width: 3px; height: 14px; border-radius: 3px;
  background: linear-gradient(180deg, var(--pink, #7C6FF0), var(--lime, #1FA97E));
}

@media (min-width: 720px) {
  /* On wider viewports the bottom nav becomes a left rail instead of
     fighting for space — still "app-like", just adapted to the form
     factor, the way Android apps do on tablets. */
  .bottom-nav { flex-direction: column; left: 0; right: auto; top: 0; bottom: 0; width: 88px; height: 100%; padding-top: calc(var(--app-bar-h) + 12px); box-shadow: 2px 0 12px rgba(33,27,54,0.06); }
  .bottom-nav-item.active::before { top: auto; left: 0; width: 3px; height: 28px; }
  .app-shell { padding-left: 88px; padding-bottom: 24px; }
  .app-bar { left: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .fab, .app-bar-action { transition: none; }
}