/* ────────────────────────────────────────────────────────────────────────
   Xpensic — App shell layout
   Glass header, glass nav drawer, glass main container.
   ──────────────────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--header-h) 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  min-height: 100dvh;
  position: relative;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}

.app-header__spacer { flex: 1; }

/* Brand lockup — vector X+arrow mark + live-text wordmark and tagline.
   Everything is vector / real text, so it stays crisp on any screen and
   takes its colours from the --lockup-* tokens below, which swap with the
   theme (light, dark, and system — which resolves to one of the two). The
   tagline is never hidden or cropped: on narrow screens it wraps onto a
   second line instead. */
:root {
  --lockup-wordmark: #0F1B3D;
  --lockup-tagline: #334155;
  --brand-mark-navy: #0F1B3D;
}
[data-theme="dark"] {
  --lockup-wordmark: #FFFFFF;
  --lockup-tagline: #D5DEEA;
  --brand-mark-navy: #8DA2EC;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  margin-left: calc(-1 * var(--space-1));
  transition: transform var(--dur-med) var(--ease-spring);
  text-decoration: none;
  color: var(--color-text);
}
.app-brand:hover { transform: scale(1.02); }

.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 45px;
  height: 42px;
}
.brand-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  line-height: 1;
}
.brand-wordmark {
  font-family: var(--font-display, "Inter"), system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lockup-wordmark);
}
.brand-tagline {
  font-family: var(--font-sans, "Inter"), system-ui, sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1.25;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lockup-tagline);
  text-wrap: balance;
}

/* Phones / small tablets: slightly smaller lockup; the tagline wraps to
   two lines inside the space available rather than being dropped. */
@media (max-width: 720px) {
  .app-brand { gap: 8px; }
  .brand-mark { width: 36px; height: 34px; }
  .brand-wordmark { font-size: 19px; }
  .brand-tagline { font-size: 8.5px; letter-spacing: 0.06em; }
}

/* Narrow phones: the lockup, month picker and theme toggle can't share one
   row without squeezing the tagline, so the header becomes two rows —
   menu + brand (+ theme icon) on top, month picker underneath. */
@media (max-width: 560px) {
  :root { --header-h: 104px; }
  .app-header {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 6px;
    column-gap: var(--space-2);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .app-header__spacer { display: none; }
  .app-brand { flex: 1 1 0; }
  .theme-toggle { order: 1; padding: 6px 10px; }
  .theme-toggle #theme-label { display: none; }
  .month-picker { order: 2; flex: 1 1 100%; justify-content: space-between; }
  .month-picker__label { flex: 1 1 auto; }
}

/* ─── Hamburger icon ──────────────────────────────────────────────────── */
.icon-btn__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
  height: 14px;
}
.icon-btn__bars > span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .icon-btn__bars > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .icon-btn__bars > span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .icon-btn__bars > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Nav drawer ──────────────────────────────────────────────────────── */
.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--nav-w);
  max-width: 86vw;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-right: 1px solid var(--glass-border);
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 50;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-nav.is-open {
  transform: translateX(0);
}

.app-nav__profile {
  padding: 0;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--space-1);
}

/* XPENSIC drawer brand — full lockup that fills the top of the
   drawer. The mark sits on the left, the wordmark + tagline stack
   to its right. Sized to feel anchored (not floating) at the top of
   the menu, with generous vertical padding so the menu list below
   has clear breathing room. The wordmark + tagline are always both
   visible (the tagline is the brand's voice, not a decorative
   flourish), and the tagline wraps to a second line on narrow
   drawers so the full sentence is never truncated. */
.app-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Anchored at the very top of the drawer — minimal top padding so the
     logo starts flush with the top edge and no space is wasted. Bottom
     padding gives breathing room above the profile card divider. */
  padding: var(--space-3) var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--glass-border);
}

/* Drawer brand: the same vector lockup, shown larger. */
.brand-lockup--drawer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-lockup--drawer .brand-mark { width: 58px; height: 54px; }
.brand-lockup--drawer .brand-type { gap: 5px; flex: 1 1 auto; }
.brand-lockup--drawer .brand-wordmark { font-size: 28px; }
.brand-lockup--drawer .brand-tagline { font-size: 10.5px; }
.app-nav__profile-card {
  /* Wraps the profile link so it shares padding/visual rhythm without
     leaking layout into the surrounding nav shell. The element is a
     plain block — no border of its own — because the parent
     `.app-nav__profile` already carries the divider. */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.app-nav__profile-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--dur-med) var(--ease-out);
}
.app-nav__profile-link:hover {
  background: var(--glass-bg-soft);
}
.app-nav__profile-link.is-active {
  background: var(--color-primary-soft);
}
.app-nav__profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  flex: 0 0 auto;
  object-fit: cover;
  border: 2px solid var(--glass-border-strong);
}
.app-nav__profile-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.app-nav__profile-name {
  font-weight: 600;
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-nav__profile-phone {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-nav__profile-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--color-text-faint);
  opacity: 0.7;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.app-nav__profile-link:hover .app-nav__profile-chevron {
  opacity: 1;
  transform: translateX(2px);
}
.app-nav__profile-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: 500;
  font-family: inherit;
  font-size: var(--text-sm);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
  position: relative;
}
.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.nav-link:hover {
  background: var(--glass-bg-soft);
  color: var(--color-text);
  transform: translateX(2px);
}
.nav-link.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-weight: 600;
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
}
.nav-link.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Nav link icon — crisp 20px glyph that inherits the link colour and
   stays vertically centred with the label. Sized for a comfortable
   touch target on mobile while staying subtle on desktop. */
.nav-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: inherit;
  opacity: 0.85;
}
.nav-link__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nav-link.is-active .nav-link__icon {
  color: var(--color-primary-text);
  opacity: 1;
}
.nav-link__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sign-out nav link — sits at the bottom of the nav list. Uses the
   danger colour on hover so it reads as a destructive action without
   competing with the primary nav links. */
.nav-link--signout {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}
.nav-link--signout:hover,
.nav-link--signout:focus-visible {
  background: var(--color-danger-soft, rgba(239, 68, 68, 0.12));
  color: var(--color-danger, #ef4444);
  outline: none;
}
.nav-link--signout .nav-link__icon {
  color: inherit;
}

.nav-link--profile { display: none; }

/* ─── Quick actions ──────────────────────────────────────────────────── */
.app-nav__quick {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--glass-border);
}
.app-nav__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0 var(--space-2) var(--space-2);
}
.app-nav__quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.app-nav__quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--glass-border);
  background: var(--glass-bg-soft);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.app-nav__quick-btn:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.app-nav__quick-btn:active {
  transform: translateY(0.5px);
}
.app-nav__quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--color-primary-text);
}
.app-nav__quick-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Keep the icon glyph crisp on hover — the camera's thin strokes
   can look washed out against the glass background + shadow that
   the button picks up, so keep the primary colour at full strength. */
.app-nav__quick-btn:hover .app-nav__quick-icon,
.app-nav__quick-btn:focus-visible .app-nav__quick-icon {
  color: var(--color-primary-text);
  opacity: 1;
  filter: drop-shadow(0 0 1px var(--color-primary-soft));
}
.app-nav__quick-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav links section — grows to fill remaining space so the footer
   stays pinned to the bottom. Scrolls internally when the menu is
   taller than the viewport; the scrollbar is visible (thin, themed)
   so users can tell there are more options to reach. */
.app-nav__links {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.app-nav__links::-webkit-scrollbar { width: 6px; }
.app-nav__links::-webkit-scrollbar-track { background: transparent; }
.app-nav__links::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 8px;
}
.app-nav__links::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-faint);
}

.app-nav__footer {
  margin-top: auto;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-2) var(--space-2);
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}
.app-nav__encrypted {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.app-nav__encrypted:hover,
.app-nav__encrypted:focus-visible {
  color: var(--color-text-muted);
}
.app-nav__encrypted-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-success);
}
.app-nav__encrypted-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.app-nav__encrypted-info {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.75;
}
.app-nav__encrypted-info svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Scrim ───────────────────────────────────────────────────────────── */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.nav-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Main + view container ───────────────────────────────────────────── */
.app-main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) calc(var(--space-7) + 80px);
  scroll-behavior: smooth;
}

.app-main:focus { outline: none; }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.app-footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-4) var(--space-5);
}

.view {
  max-width: var(--content-max);
  margin: 0 auto;
  animation: view-fade-in var(--dur-med) var(--ease-out);
}

@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Toast region ────────────────────────────────────────────────────── */
/* Toasts appear exactly in the center of the viewport so they never
   collide with the feedback FAB (bottom-right, z-index 900). The
   region is a flex column that stacks multiple toasts downward from
   the center. */
.toast-region {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 950;
  pointer-events: none;
}

/* ─── Centered toast (used for "Coming Soon") ─────────────────────────── */
.toast--center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  pointer-events: none;
}

/* ─── Lock screen ─────────────────────────────────────────────────────── */
body.app-locked .app { display: none; }

/* ─── Mobile layout tightening ────────────────────────────────────────── */
@media (max-width: 720px) {
  .app-main { padding: var(--space-4) var(--space-4) 100px; }
  .app-header { padding: 0 var(--space-4); }

  /* On phones the drawer is narrower, so tighten the brand + profile
     spacing and let the quick actions breathe without crowding. */
  .app-nav__brand { padding: var(--space-3) var(--space-1) var(--space-3); }
  .brand-lockup--drawer .brand-mark { width: 50px; height: 47px; }
  .brand-lockup--drawer .brand-wordmark { font-size: 25px; }
  .app-nav__profile-link { padding: var(--space-2) var(--space-1); }
  .app-nav__quick-btn { padding: 10px var(--space-2); }
}