/* ============================================================
   APP STYLES — NOTES
   The list view uses the shared components from css/components.css
   (.view, .nav, .nav-row, .back, .nav-t, .scroll, .large-title,
   .search, .group, .row, .row-main, .row-top, .row-sub). Only
   notes-specific overrides live here. Dark/light via CSS variables
   (data-theme on #phone).
   ============================================================ */

/* Editor note date line — full-width and centered like the reference */
.note-date { font-size: 13px; color: var(--label2); text-align: center; padding-bottom: 12px; }

/* Editor note body — preserves line breaks, side/bottom padding like reference */
.note-body { font-size: 17px; line-height: 1.5; color: var(--label); white-space: pre-wrap; padding: 0 20px 40px; }
.note-body h2 { font-size: 28px; font-weight: 700; margin: 0 0 6px 0; }

/* Neutralize Bootstrap's .row gutter for the Notes list (same approach as the Settings rows).
   Bootstrap gives .row a -12px side margin, which pulled the text to 4px from the box edge;
   with the gutter at 0 the text sits 16px in, like the reference. */
.view[data-view="notes-list"] .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  flex-wrap: nowrap;
}

/* Notes app back button uses the --notes accent color (shared .back uses --tint) */
.view[data-view="notes-list"] .back,
.view[data-view="notes-editor"] .back { color: var(--notes); }

/* Notes editor nav-right icons use the --notes accent color */
.view[data-view="notes-editor"] .nav-r .icon-btn { color: var(--notes); }

/* Notes list row: separate the date+preview line from the title so it is not cramped against the row box */
.view[data-view="notes-list"] .row-sub { margin-top: 5px; }

/* Empty state (no notes) */
.nvw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60%; text-align: center; color: var(--label2); padding: 0 24px; }

/* Empty-state "New note" button */
.nvw-empty-btn { margin-top: 16px; background: var(--notes); color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 14px; cursor: pointer; }