/*
 * Toddyi application-wide styles.
 * Extends Pico CSS with design tokens and component classes.
 * Keep view styling centralized here instead of using inline styles.
 */

/* ===== Background ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/assets/bg-c0a5dc14.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

/* ===== App shell: collapsible sidebar and main content ===== */
:root {
  --sidebar-w: 240px;
  --sidebar-rail: var(--toddyi-size-68px);
  --content-gutter: clamp(var(--toddyi-size-1-25rem), var(--toddyi-size-3vw), var(--toddyi-size-2-5rem));
  /* Android status bar + gesture nav strip on the Capacitor WebView. `env()`
     returns 0 on every non-notched context, so desktop + browser layout is
     unchanged and only the native shell picks up the padding. Paired with
     viewport-fit=cover in application.html.erb so the values become non-zero
     when there *is* an inset to respect. (system bars overlap) */
  --safe-top:    env(safe-area-inset-top, var(--toddyi-size-0px));
  --safe-bottom: env(safe-area-inset-bottom, var(--toddyi-size-0px));
  --safe-left:   env(safe-area-inset-left, var(--toddyi-size-0px));
  --safe-right:  env(safe-area-inset-right, var(--toddyi-size-0px));
}

/* Body carries the insets on all four sides so every child renders inside
   the visible viewport. Without vertical padding, sticky elements (sidebar,
   topbar) with `top: var(--safe-top)` only clear the status bar once the
   user scrolls — the initial flow position is still at y=0, i.e. under it. */
body {
  padding-block-start: var(--safe-top);
  padding-block-end:   var(--safe-bottom);
  padding-inline-start: var(--safe-left);
  padding-inline-end:   var(--safe-right);
}

/* min-height is the *visible* viewport, not the display: 100vh under
   edge-to-edge counts pixels the system bars sit on, so subtract them
   here or the shell scrolls when there is nothing to see. */
.app-shell { display: flex; align-items: flex-start; min-height: calc(var(--toddyi-size-100vh) - var(--safe-top) - var(--safe-bottom)); }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  /* Sticky is viewport-relative; without this the sidebar would clamp to
     top:0 of the display and the head icons would sit behind the status bar. */
  top: var(--safe-top);
  align-self: flex-start;
  /* Same reason as the shell — the sidebar is exactly one visible viewport tall,
     not one display's worth. */
  height: calc(var(--toddyi-size-100vh) - var(--safe-top) - var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--toddyi-size-0-2rem);
  padding: var(--toddyi-size-0-75rem);
  background: var(--pico-card-background-color);
  border-inline-end: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--toddyi-size-0-5rem);
  padding: var(--toddyi-size-0-15rem) var(--toddyi-size-0-3rem) var(--toddyi-size-0-75rem);
  margin-bottom: var(--toddyi-size-0-4rem);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-55rem);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--toddyi-size-1-2rem);
  color: var(--pico-color);
  white-space: nowrap;
  overflow: hidden;
}
.brand img { height: var(--toddyi-size-32px); width: auto; flex-shrink: 0; filter: drop-shadow(0 var(--toddyi-size-2px) var(--toddyi-size-4px) var(--toddyi-logo-shadow)); }
.sidebar__collapse { flex-shrink: 0; color: var(--pico-muted-color); }
.sidebar__collapse svg { transition: transform 0.18s ease; }
.sidebar__collapse svg { stroke-width: var(--toddyi-size-2px); }
.topbar__burger svg { stroke-width: var(--toddyi-size-2-2px); }

.sidebar__nav { display: flex; flex-direction: column; gap: var(--toddyi-size-0-12rem); }

/* Navigation items occupy the full sidebar width. */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-65rem);
  width: var(--toddyi-size-100pct);
  padding: var(--toddyi-size-0-6rem) var(--toddyi-size-0-7rem);
  border-radius: var(--toddyi-size-0-6rem);
  text-decoration: none;
  color: var(--pico-muted-color);
  font-size: var(--toddyi-size-0-92rem);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--pico-secondary-background); color: var(--pico-color); }
.nav-link.is-active { background: var(--pico-primary); color: var(--pico-primary-inverse); }
.nav-link svg { width: var(--toddyi-size-1-05em); height: var(--toddyi-size-1-05em); }
.nav-emoji { display: inline-flex; width: var(--toddyi-size-1-3rem); justify-content: center; flex-shrink: 0; font-size: var(--toddyi-size-1-05rem); }

/* Inline SVG icons (IconHelper) — inherit text color, sized in em. (#93) */
.icon { width: var(--toddyi-size-1em); height: var(--toddyi-size-1em); flex-shrink: 0; vertical-align: middle; }
.nav-icon { display: inline-flex; width: var(--toddyi-size-1-3rem); justify-content: center; flex-shrink: 0; color: currentColor; }
.nav-icon .icon { width: var(--toddyi-size-1-2rem); height: var(--toddyi-size-1-2rem); }

.sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--toddyi-size-0-12rem);
  padding-top: var(--toddyi-size-0-5rem);
  border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.sidebar__foot form { margin: 0; width: var(--toddyi-size-100pct); }
.sidebar__action {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-65rem);
  width: var(--toddyi-size-100pct);
  padding: var(--toddyi-size-0-55rem) var(--toddyi-size-0-7rem);
  border-radius: var(--toddyi-size-0-6rem);
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  font-size: var(--toddyi-size-0-9rem);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.sidebar__action:hover { background: var(--pico-secondary-background); color: var(--pico-color); }
.sidebar__action--danger { color: var(--toddyi-danger); }
.sidebar__action--danger:hover { background: color-mix(in srgb, var(--toddyi-danger) var(--toddyi-size-12pct), transparent); color: var(--toddyi-danger); }
.sidebar__action-icon { display: inline-flex; width: var(--toddyi-size-1-3rem); justify-content: center; flex-shrink: 0; font-size: var(--toddyi-size-1-05rem); }
.sidebar__action-icon svg { width: var(--toddyi-size-18px); height: var(--toddyi-size-18px); stroke-width: var(--toddyi-size-2-2px); }

/* Collapsed rail mode is available on desktop only. */

/* Main content area. */
.app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: calc(var(--toddyi-size-100vh) - var(--safe-top) - var(--safe-bottom)); padding-bottom: var(--safe-bottom); }
.topbar {
  position: sticky;
  /* Match the sidebar: sticky is viewport-relative, so keep the sticky point
     below the status bar. */
  top: var(--safe-top);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-5rem);
  padding: var(--toddyi-size-0-5rem) var(--content-gutter);
  backdrop-filter: saturate(180%) blur(var(--toddyi-size-8px));
  background: color-mix(in srgb, var(--pico-background-color) 85%, transparent);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}
.topbar__burger { display: none; }
.app-content > main { flex: 1 1 auto; padding-inline: var(--content-gutter); }

/* Mobile off-canvas drawer. */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--toddyi-app-overlay); z-index: 55; }

.nav-spacer { flex: 1 1 auto; }

.pill-group {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-4px);
  background: var(--pico-card-background-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-radius: var(--toddyi-size-2rem);
  padding: var(--toddyi-size-2px) var(--toddyi-size-8px);
}
.pill-divider { width: var(--toddyi-size-1px); height: var(--toddyi-size-1-2rem); background: var(--pico-muted-border-color); }

.icon-btn {
  background: transparent;
  border: none;
  padding: var(--toddyi-size-0-4rem);
  margin: 0;
  font-size: var(--toddyi-size-1-05rem);
  line-height: 1;
  cursor: pointer;
  /* Pico redefines --pico-color inside buttons as the white inverse color.
     Use --pico-muted-color so SVG strokes that use currentColor remain visible. */
  color: var(--pico-muted-color);
  display: inline-flex;
  align-items: center;
}
.icon-btn:hover { color: var(--pico-primary); }
.icon-btn--danger { color: var(--toddyi-danger); }
.icon-btn svg { width: var(--toddyi-size-18px); height: var(--toddyi-size-18px); }

.lang-dropdown { margin: 0; }
.lang-dropdown summary {
  background: transparent; border: none; padding: var(--toddyi-size-0-4rem) var(--toddyi-size-0-6rem); margin: 0;
  font-size: var(--toddyi-size-0-8rem); font-weight: 700; list-style: none;
}
.lang-dropdown summary::after { display: none !important; }

.user-email { color: var(--pico-muted-color); }