/* overrides.css — web-only CSS tweaks layered on top of styles.css.
   (client/ is left untouched; this file loads after styles.css so it wins.) */

/* Lesson prev/next buttons must never overflow the viewport: cap width, ellipsis
   the module name, and allow the action bar to wrap on narrow screens. */
.lesson-actions { flex-wrap: wrap; row-gap: 8px; }
.lesson-nav-btn { width: auto; min-width: 0; max-width: 44vw; flex: 0 1 auto; }
.lesson-nav-btn .nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── Mobile bottom tab bar fixes (≤860px) ─────────────────────────────────
   The base stylesheet turns .nav into a bottom tab bar, but (a) the sidebar's
   group-label divs were left in the bar eating tab space, and (b) full labels
   like “Daily Notes” clipped mid-word. Hide the group labels and swap each
   tab's label for its short form (spans added in app.js renderApp). */
.nav-label-short { display: none; }             /* desktop shows the full label */
@media (max-width: 860px) {
  .nav .nav-group { display: none; }            /* group headers are a sidebar affordance */
  .nav-label-full { display: none; }
  .nav-label-short {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10px; line-height: 1.2;
  }
  .nav button { padding: 6px 1px; }
}

/* ── Admin Users table polish ─────────────────────────────────────────────
   The inline role <select> collapsed to ~40px ("tr…"), and the action links
   wrapped mid-label. Give the select room and keep each action on one line
   (the .table-wrap already scrolls horizontally when needed). */
.data-table select, .data-table .select { min-width: 104px; }
.data-table .note-actions { display: flex; gap: 12px; flex-wrap: nowrap; align-items: center; }
.data-table .note-actions .btn-link { white-space: nowrap; }
.data-table td { vertical-align: middle; }