/*
 * The list views' shared layouts: Reading (books) and Cooking (recipes).
 * Change a look here and both pages follow. Loaded from pages/page.php after
 * stylish-portfolio.css (which has the Filter and Sort pills and panels, the
 * card grid and the grey bar). --accent is the page's own colour, set by
 * page.php. What only one page has stays in that page's file.
 *
 *   Card bar ....... .cards-bar, -left, -right, .cards-count
 *   Details panel .. .details-wrap, .details-head, .details-count, .count-phone,
 *                    .det-phone, .det-bar
 *   Filter chips ... .filt-chips, .filt-chip, .filt-clear
 *   Table .......... .details-scroll, table.details (sticky header rows, the
 *                    sticky name column, sorting arrow), column filters
 *                    (.filt, .filt-btn, .filt-panel), the column chooser
 *                    (.col-pick, #colPickPanel), dragged widths (.col-resizer),
 *                    .cell-editor, the phone line .m-line
 *   Drawer ......... .modal.drawer (the book and recipe drawers)
 */

/* ---- Card bar (above the cards) ---------------------------------------------
   The Filter pill and its chips on the left, the admin buttons on the right.
   "showing n of N" is in the grey bar; on a phone, with no room there, it sits
   at the end of the Filter row (.cards-count). */
.cards-bar { display:flex; align-items:flex-start; gap:10px; margin-bottom:1rem; }
.cards-bar-left { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cards-bar-right { flex:0 0 auto; display:flex; gap:6px; }
.cards-count { display:none; margin-left:auto; color:#999; font-size:.8rem; white-space:nowrap; }
@media (max-width: 767.98px) {
  .cards-bar { flex-wrap:wrap; }
  .cards-count { display:inline; }
  .cards-bar .filt-chips { flex-basis:100%; }
}

/* ---- Details panel ------------------------------------------------------------
   One line: the title on the left, the column links and the admin buttons
   pushed right. nowrap so a narrow window shrinks the title rather than
   dropping the buttons onto a second row. */
.details-wrap { background:#fff; border:1px solid #e5e5e5; border-radius:14px; padding:18px 20px; margin:0 auto 2rem; color:#333; }
.details-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:nowrap; }
.details-head h3 { margin:0; color:#222; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.details-count { color:#999; font-size:.85rem; margin-left:auto; white-space:nowrap; }
/* "showing n of N" on a phone, in place of the column links. */
.count-phone { display:none; }
/* Phone: the Filter and Sort pills, in place of the column filters. */
.det-phone { display:none; }
.det-bar { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
@media (max-width: 767px) {
  .count-phone { display:inline; }
  .det-phone { display:block; }
  .col-pick, #widthReset { display:none; }
}

/* ---- Filter chips ---------------------------------------------------------------
   Every filter in use as a removable chip, so one on a column scrolled out of
   sight (or hidden on a phone) can't go unnoticed. */
.filt-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.filt-chips[hidden] { display:none; }
.details-wrap > .filt-chips { margin:-4px 0 10px; }
.filt-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; background:#f1f3f4;
             border:1px solid #e3e6e8; border-radius:14px; padding:2px 4px 2px 10px; font-size:.8rem; color:#444; }
.filt-chip b { font-weight:600; color:#222; }
.filt-chip i { color:var(--accent); }
.filt-chip .v { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filt-chip button { border:0; background:none; color:#999; font-size:1rem; line-height:1; padding:0 4px; cursor:pointer; border-radius:50%; }
.filt-chip button:hover { color:#333; background:#e3e6e8; }
.filt-clear { font-size:.8rem; color:#999; text-decoration:underline; margin-left:6px; }
.filt-chips .filt-clear { margin-left:4px; }

/* ---- The table ------------------------------------------------------------------
   Its own scroll box, vertically and sideways: the header rows can then be
   sticky, and the sideways scrollbar sits at the bottom of the box instead of
   below every row. page.php measures the box and sets its max-height. */
.details-scroll { overflow:auto; max-height:60vh; min-height:240px; transition:max-height .18s ease; overscroll-behavior:contain; }
table.details { width:100%; border-collapse:collapse; font-size:.9rem; text-align:left; }
table.details th, table.details td { text-align:left; padding:8px 10px; border-bottom:1px solid #eee; white-space:nowrap; }
/* Sticky header rows. A collapsed border does not travel with a sticky cell,
   so the dividing lines are inset shadows. */
table.details thead th { position:sticky; background:#fff; }
table.details thead tr:first-child th { top:0; z-index:3; box-shadow:inset 0 -1px 0 #eee; color:#999; font-weight:600; cursor:pointer; user-select:none; }
table.details thead tr:first-child th:hover { color:#555; }
table.details thead tr.filter-row th { top:var(--hdr1-h, 34px); z-index:2; box-shadow:inset 0 -2px 0 #eee;
  border-bottom:2px solid #eee; padding:2px 10px 6px; cursor:default; font-weight:normal; }
.sarr { color:var(--accent); }
/* Numbers: fixed-width digits that line up, the quantities right-aligned. */
table.details .num { text-align:right; font-variant-numeric:tabular-nums; }
table.details .tnum { font-variant-numeric:tabular-nums; }
table.details td.title { font-weight:700; color:#111; }
/* The name column (class "title" on its cells and both its headings) stays
   at the left while the rest scrolls under it, so a row never loses its name;
   a soft edge once something is under it. */
table.details .title { position:sticky; left:0; }
table.details td.title { background:#fff; z-index:1; box-shadow:inset 0 -1px 0 #eee; }
table.details thead tr:first-child th.title { z-index:4; }
table.details thead tr.filter-row th.title { z-index:3; }
.details-scroll.scrolled-x td.title { box-shadow:inset 0 -1px 0 #eee, 6px 0 6px -6px rgba(0,0,0,.2); }
.details-scroll.scrolled-x thead tr:first-child th.title { box-shadow:inset 0 -1px 0 #eee, 6px 0 6px -6px rgba(0,0,0,.2); }
.details-scroll.scrolled-x thead tr.filter-row th.title { box-shadow:inset 0 -2px 0 #eee, 6px 0 6px -6px rgba(0,0,0,.2); }
table.details tr:hover td { background:#f6f6f6; }

/* Column filters: a funnel under the heading, its list in a panel. */
.filt { position:relative; display:inline-block; }
.filt-btn { background:none; border:0; color:#bbb; cursor:pointer; font-size:.85rem; padding:0 2px; }
.filt-btn.active { color:var(--accent); }
.filt-panel { display:none; position:fixed; z-index:1000; background:#fff; border:1px solid #ddd; border-radius:8px; padding:8px 10px;
              max-height:280px; overflow:auto; min-width:160px; box-shadow:0 6px 18px rgba(0,0,0,.16); text-align:left; }
.filt-panel.open { display:block; }
.filt-panel label { display:block; font-size:.85rem; padding:3px 0; white-space:nowrap; color:#333; font-weight:normal; cursor:pointer; }

/* The column chooser: a panel like the column filters, anchored to its link. */
.col-pick { display:inline-block; }
#colPickPanel .note { display:block; color:#aaa; font-size:.75rem; padding:2px 0 4px; }
#colPickPanel label.fixed { color:#aaa; cursor:default; }
#colPickPanel .col-all { display:block; margin-top:6px; font-size:.8rem; color:#999; text-decoration:underline; }

/* Dragged widths. No position:relative on the header cells: it would beat
   their position:sticky, and sticky is positioned already. */
.col-resizer { position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; user-select:none; z-index:2; }
.col-resizer:hover { background:rgba(0,0,0,.12); }
table.details.resizable th, table.details.resizable td { overflow:hidden; text-overflow:ellipsis; }

/* Editing in place (admin). */
.cell-editor { width:100%; box-sizing:border-box; font-size:.85rem; padding:2px 4px; border:1px solid var(--accent); border-radius:4px; }

/* Phones: one full-width column, the name, whose cell carries a grey line of
   what the other columns would have said (.m-line); the per-column filters
   go with the columns. */
.m-line { display:none; }
@media (max-width: 767px) {
  table.details th:not(.title), table.details td:not(.title) { display:none; }
  table.details thead tr.filter-row { display:none; }
  table.details th, table.details td { padding:8px 8px; }
  table.details.resizable td.title { white-space:normal; overflow:visible; }
  .m-line { display:block; font-weight:400; line-height:1.3; }
  .col-resizer { display:none; }
}

/* ---- The note icon (Reading: classes/booknotes.php flagHtml) -------------------
   Here rather than in pages/reading-notes.php, which comes at the end of the
   page: until then the icons were plain grey buttons. */
.note-flag { background:none; border:0; padding:0 2px; color:#9ea7af; cursor:pointer; position:relative; line-height:1; }
.note-flag:hover, .note-flag:focus-visible { color:#6f7980; }
.note-flag.has { color:var(--accent); }
.note-flag .note-n { font-size:.62rem; font-weight:700; vertical-align:super; margin-left:1px; }
.note-flag .note-n:empty { display:none; }
/* In the details table it follows the title, quietly. */
#detTable td.title .note-flag { font-size:.85rem; margin-left:5px; vertical-align:baseline; }

/* ---- Drawer ----------------------------------------------------------------------
   A .modal.drawer slides in from the right on a computer and up from the bottom
   on a phone, so the list stays in view behind it. Bootstrap's modal still does
   the work (show/hide, backdrop, Esc, scroll lock); only the look changes.
   Lists.sheetDrag() lets a phone pull it away by its header strip. */
.modal.drawer { overflow:hidden; }
.modal.drawer .modal-dialog {
  position:fixed; top:0; right:0; bottom:0; left:auto;
  width:var(--drawer-w, 420px); max-width:92vw; margin:0; padding:0;
  transform:translate3d(100%,0,0); transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.modal.drawer.show .modal-dialog { transform:none; }
.modal.drawer .modal-content { height:100%; display:flex; flex-direction:column; border:0; border-radius:0;
  box-shadow:-8px 0 30px rgba(0,0,0,.13); text-align:left; color:#333; }
/* The top strip: the tool icons and the close cross. */
.modal.drawer .modal-header { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:12px;
  border:0; padding:10px 12px 0; min-height:0; position:relative; }
.modal.drawer .modal-header .btn-close { margin:0; opacity:.35; }
.modal.drawer .modal-header .btn-close:hover { opacity:.7; }
.modal.drawer .modal-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 24px 28px; }
.drawer-tool { background:none; border:0; padding:0; color:var(--accent); font-size:1.05rem; opacity:.8; cursor:pointer; }
.drawer-tool:hover, .drawer-tool:focus { opacity:1; color:var(--accent); }
@media (max-width: 767px) {
  /* Not full height: the strip of list left showing says "on top of the
     list, not a new page". The handle is drawn on the header strip. */
  .modal.drawer .modal-dialog { top:auto; left:0; right:0; width:auto; max-width:none; height:88vh; transform:translate3d(0,100%,0); }
  .modal.drawer .modal-content { border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.18); }
  .modal.drawer .modal-header { padding-top:18px; touch-action:none; }
  .modal.drawer .modal-header::before { content:''; position:absolute; top:8px; left:50%; margin-left:-18px;
    width:36px; height:4px; border-radius:2px; background:#dcdcdc; }
  .modal.drawer .modal-body { padding:4px 18px 24px; }
}