/* Minimal layer on top of Pico.css. */

.flash {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
}
.flash-error   { border-left-color: #d33; }
.flash-success { border-left-color: #2a9d5a; }
.flash-info    { border-left-color: var(--pico-primary); }

.pill {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}
.pill-on  { background: #dff5e6; color: #1e6b39; }
.pill-off { background: #eee;    color: #555; }

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.route-card header { display: flex; align-items: center; gap: .75rem; }
.route-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.route-disabled { opacity: .7; }

.filter-row { margin-top: 1rem; }
.manual-ref { color: var(--pico-muted-color); }

.sched-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  border: 1px solid var(--pico-muted-border-color);
}
.scheduled-table .thumb-cell {
  width: 80px;
  vertical-align: middle;
  position: relative;
}
.scheduled-table td { vertical-align: top; }
.thumb-badge {
  position: absolute;
  bottom: 2px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 999px;
  padding: 0 .4rem;
  font-size: .7rem;
}
.msg-count { color: var(--pico-muted-color); }

/* ── Favorites list ────────────────────────────────────────────── */
.fav-list { list-style: none; padding: 0; margin: 0; }
.fav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
  gap: .75rem;
}
.fav-row:last-child { border-bottom: none; }
.fav-label { flex: 1; min-width: 0; }    /* min-width:0 lets long names truncate inside flex */
.fav-star { color: #f0a020; margin-right: .25rem; font-size: 1.1rem; }
.fav-star.fav-off { color: var(--pico-muted-color); }
.fav-row form { margin: 0; }              /* drop pico's default form margin so the button aligns */

/* ── Mobile responsive (≤ 768 px) ─────────────────────────────────
   Single responsive UI rather than a separate "mobile" build. The
   biggest pain points on a phone are: the horizontal nav, wide tables,
   and two-up grids. We collapse those. Pico.css handles forms, inputs,
   and Quill itself reasonably out of the box. */
@media (max-width: 768px) {
  /* Tighter container padding on phones. */
  main.container { padding-left: .75rem; padding-right: .75rem; }

  /* Wrapping nav: each <ul> can break onto multiple lines. */
  nav.container > ul {
    flex-wrap: wrap;
    gap: .25rem;
  }
  nav.container > ul li { padding: .15rem .35rem; }

  /* Pico's .grid is two-column by default; stack on phones. */
  .grid { grid-template-columns: 1fr !important; }

  /* Header rows like "Routes  +Add" — stack so the add button gets full width. */
  .route-header { flex-direction: column; align-items: stretch; gap: .5rem; }

  /* Convert the wide scheduled table into stacked cards: hide the header
     row and lay each <td> as a labelled block using data-label. */
  .scheduled-table thead { display: none; }
  .scheduled-table tr {
    display: block;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px;
    margin-bottom: .75rem;
    padding: .75rem;
  }
  .scheduled-table td {
    display: block;
    border-top: none !important;
    padding: .25rem 0;
  }
  .scheduled-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--pico-muted-color);
    margin-right: .25rem;
  }
  .scheduled-table .thumb-cell {
    width: auto;
    margin-bottom: .25rem;
  }
  .thumb-badge { right: auto; left: 56px; bottom: auto; top: -4px; }

  /* Same treatment for the users table. */
  .users-table thead { display: none; }
  .users-table tr {
    display: block;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px;
    margin-bottom: .5rem;
    padding: .5rem .75rem;
  }
  .users-table td {
    display: block;
    border-top: none !important;
    padding: .15rem 0;
  }
  .users-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--pico-muted-color);
  }

  /* Larger touch targets where pico's defaults are tight. */
  button, [role="button"] { min-height: 44px; }

  /* Quill toolbar wraps better when narrow; just constrain its height. */
  .ql-toolbar.ql-snow { padding: 4px; }
  .quill-editor { min-height: 6rem; }

  /* Favorites rows: stack label and button on phones. */
  .fav-row { flex-direction: column; align-items: stretch; }
  .fav-row form { width: 100%; }
  .fav-row form button { width: 100%; }
}