/* The page shell (design step 7, F-sidebar-phone-bar): the sidebar from 992px
   up, the phone bar with its center "+" below, the "+" and More sheets, and the
   sidebar's Add menu.
   Colors are the App Light tokens in app.css (F81), so light and dark follow
   the device; tap targets stay 44px or more. */

.nw-contents { display: contents; }
/* A list entry that is a form's button ("Use accounting words"): the form takes no
   box, so the list's own "first/last child" border rules don't reach it. */
.nw-contents > .list-group-item { border-width: 0 0 var(--bs-list-group-border-width); text-align: left; }

/* --- Sidebar (992px and up) --------------------------------------------- */
.nw-sidebar { display: none; }
@media (min-width: 992px) {
  body.nw-shell { padding-left: 15rem; }
  .nw-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; width: 15rem;
    display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
    padding: 1.25rem 0.875rem 1rem; background: var(--nw-card);
    border-right: 1px solid var(--nw-line);
  }
  body.nw-shell .nw-phonebar, body.nw-shell #nw-more { display: none; }
  body.nw-shell > main.container { padding-left: 1.75rem; padding-right: 1.75rem; }
}
.nw-side-brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.625rem 0; }
.nw-side-title { font-weight: 700; font-size: 1.125rem; color: var(--nw-ink); text-decoration: none; }
.nw-side-title:hover { color: var(--nw-ink); }
.nw-side-workspace { font-size: 0.8125rem; color: var(--nw-ink-2); padding: 0 0.625rem 0.5rem; }
.nw-side-search { padding: 0.25rem 0.375rem 0.75rem; }
.nw-side-main, .nw-side-group ul { list-style: none; margin: 0; padding: 0; }
.nw-side-link {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 44px;
  padding: 0.5rem 0.625rem; border: 0; border-radius: 10px; background: transparent;
  color: var(--nw-ink); font-size: 0.9375rem; text-align: left; text-decoration: none;
}
.nw-side-link svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--nw-ink-2); }
.nw-side-link:hover { background: var(--nw-pill); color: var(--nw-ink); }
/* Ink, not blue: blue on the grey is under 4.5:1; the icon stays blue. */
.nw-side-link[aria-current="page"] { background: var(--nw-pill); color: var(--nw-ink); font-weight: 600; }
.nw-side-link[aria-current="page"] svg { color: var(--nw-accent); }
.nw-side-add, .nw-side-add svg { color: var(--nw-link); font-weight: 600; }
.nw-side-more {
  margin: 0.75rem 0.375rem 0.25rem; padding: 0.625rem 0.25rem 0.25rem; border-top: 1px solid var(--nw-line);
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nw-ink-2);
}
.nw-side-group > summary {
  display: flex; align-items: center; min-height: 40px; padding: 0.375rem 0.625rem; border-radius: 10px;
  color: var(--nw-ink-2); font-size: 0.875rem; cursor: pointer; list-style: none;
}
.nw-side-group > summary::-webkit-details-marker { display: none; }
.nw-side-group > summary::after { content: "›"; margin-left: auto; transition: transform 0.15s; }
.nw-side-group[open] > summary::after { transform: rotate(90deg); }
.nw-side-group > summary:hover { background: var(--nw-pill); color: var(--nw-ink); }
.nw-side-sublink {
  display: block; width: 100%; padding: 0.375rem 0.625rem 0.375rem 1.25rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--nw-ink); font-size: 0.875rem; text-align: left; text-decoration: none;
}
.nw-side-sublink:hover { background: var(--nw-pill); color: var(--nw-ink); }
.nw-side-sublink[aria-current="page"] { color: var(--nw-link); font-weight: 600; }
.nw-side-child { padding-left: 2.25rem; }
.nw-side-account {
  margin-top: auto; padding: 0.75rem 0.625rem 0; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--nw-ink-2);
}
.nw-side-account .btn { margin-left: auto; flex: 0 0 auto; }

/* --- Phone bar (under 992px) -------------------------------------------- */
.nw-phonebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: flex-end; background: var(--nw-tabbar);
  border-top: 1px solid var(--nw-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nw-slot {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 52px; padding: 6px 0 4px;
  font-size: 0.6875rem; font-weight: 500; color: var(--nw-ink-2); text-decoration: none;
}
.nw-slot svg { width: 24px; height: 24px; }
.nw-slot:hover { color: var(--nw-ink); }
.nw-slot[aria-current="page"], .nw-slot.active { color: var(--nw-link); }
.nw-slot[aria-current="page"] svg, .nw-slot.active svg { color: var(--nw-accent); }
/* The big center "+": a filled circle lifted above the bar. */
.nw-slot-add { justify-content: center; }
.nw-slot-add svg {
  width: 52px; height: 52px; padding: 13px; margin-top: -18px; border-radius: 50%;
  background: var(--nw-btn); color: var(--nw-on-btn); stroke-width: 2.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.nw-slot-add:hover svg { background: var(--nw-btn-hover); }
@media (max-width: 991.98px) {
  body.nw-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* --- Counts on menu entries (the Inbox, step 7 PR 2) --------------------- */
.nw-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 0.6875rem;
  background: var(--nw-btn); color: var(--nw-on-btn);
  font-size: 0.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.nw-side-link .nw-badge { margin-left: auto; }
/* On the phone bar it sits on the icon's top-right corner (it follows the label
   in the page, so a screen reader says "Inbox, 12 waiting"). */
.nw-slot { position: relative; }
.nw-slot .nw-badge {
  position: absolute; top: 2px; left: calc(50% + 2px); min-width: 1.125rem; height: 1.125rem;
  padding: 0 0.3125rem; font-size: 0.6875rem; box-shadow: 0 0 0 2px var(--nw-tabbar);
}
/* The urgent mark (F-urgent-inbox): a red "!" before the count in the sidebar,
   on the icon's top-left corner on the phone bar. */
.nw-badge-urgent { background: var(--bs-danger); color: #fff; min-width: 1.375rem; padding: 0; animation: nw-urgent-pulse 2s ease-in-out infinite; }
.nw-side-link .nw-badge-urgent + .nw-badge { margin-left: 0.25rem; }
.nw-slot .nw-badge-urgent { left: auto; right: calc(50% + 2px); min-width: 1.125rem; padding: 0; }
@keyframes nw-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(var(--bs-danger-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .nw-badge-urgent { animation: none; } }

/* --- Sheets: More and "+" (phones; a computer's Add is a dropdown) ------- */
.offcanvas.nw-sheet {
  --bs-offcanvas-height: auto;
  --bs-offcanvas-bg: var(--nw-card);
  max-height: 85vh;
  border-radius: var(--nw-radius-card) var(--nw-radius-card) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Without JavaScript, the "+" and More links jump to the sheet and this opens it. */
.nw-sheet:target { visibility: visible; transform: none; }
.nw-sheet .list-group-item { background: transparent; }
.nw-sheet .list-group-item[aria-current="page"] { color: var(--nw-link); font-weight: 600; }
.nw-sheet-group { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nw-ink-2); margin: 0.5rem 0 0; }
.nw-add-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.nw-add-entry {
  display: flex; align-items: center; gap: 0.875rem; min-height: 44px; margin: 0; cursor: pointer;
  padding: 0.75rem 1rem; border: 1px solid var(--nw-line); border-radius: 16px;
  background: var(--nw-card); color: var(--nw-ink); text-decoration: none;
}
.nw-add-entry:hover { background: var(--nw-pill); color: var(--nw-ink); }
.nw-add-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 12px; background: var(--nw-pill); color: var(--nw-link);
}
.nw-add-icon svg { width: 24px; height: 24px; }
.nw-add-label { display: block; font-weight: 700; font-size: 1.0625rem; }
.nw-add-hint { display: block; font-size: 0.8125rem; color: var(--nw-ink-2); }
/* The receipt entry is first and biggest. */
#nw-add-receipt .nw-add-entry { padding-top: 1rem; padding-bottom: 1rem; }
#nw-add-receipt input:focus-visible + .nw-add-entry, #nw-add-receipt:focus-within .nw-add-entry { outline: 2px solid var(--nw-accent); outline-offset: 2px; }

/* --- The sidebar's Add menu on a computer (F-add-menu-desktop) ----------- */
/* A plain desktop dropdown beside Add: one line per entry, small icons, no
   backdrop, closed by a click elsewhere or Esc (Bootstrap's dropdown). */
.nw-add-menu {
  --bs-dropdown-bg: var(--nw-card);
  --bs-dropdown-color: var(--nw-ink);
  --bs-dropdown-border-color: var(--nw-line);
  --bs-dropdown-link-color: var(--nw-ink);
  --bs-dropdown-link-hover-color: var(--nw-ink);
  --bs-dropdown-link-hover-bg: var(--nw-pill);
  --bs-dropdown-link-active-color: var(--nw-ink);
  --bs-dropdown-link-active-bg: var(--nw-pill);
  min-width: 15rem; padding: 0.375rem; border-radius: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
}
.nw-add-menu .dropdown-item {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
  padding: 0.4375rem 0.625rem; border-radius: 6px; font-size: 0.9375rem;
}
.nw-add-menu .dropdown-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--nw-link); }
.nw-add-menu form { margin: 0; }

/* --- Room under the page (Eric, 2026-10-31) ------------------------------ */
/* The last card or line of a page stopped right at the window's edge; this
   leaves a little air under it. Phones add it above the phone bar's room. */
#nw-main { padding-bottom: 2.5rem; }
@media (min-width: 992px) { #nw-main { padding-bottom: 3.5rem; } }

/* "Go to page" beside a list's Newer / Older (F-page-jump). */
.nw-page-jump .form-control { width: 4.75rem; }