/*
 * 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)); }

.app-shell { display: flex; align-items: flex-start; min-height: var(--toddyi-size-100vh); }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: var(--toddyi-size-100vh);
  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: var(--toddyi-size-100vh); }
.topbar {
  position: sticky;
  top: 0;
  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); }