/* Book Library styles.
   Light mode is the default (house rule); dark mode hangs off
   [data-theme="dark"] on <html> and only swaps the variables. */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f5;
  --border: #e3e1dc;
  --border-strong: #cfccc4;
  --text: #1c1b17;
  --text-dim: #6f6c62;
  --accent: #2f6f4f;
  --accent-soft: #e3f0d8;
  --row-hover: #faf9f6;
  --row-selected: #eef5e9;
  --panel-shadow: 0 8px 30px rgba(30, 30, 20, 0.14);
  --bar: #7fb069;
  --error-bg: #fdecea;
  --error-text: #8c2b1e;
  --ok-bg: #e9f5e3;
  --ok-text: #2f5d23;
}

[data-theme='dark'] {
  --bg: #17181a;
  --bg-soft: #1f2023;
  --border: #333438;
  --border-strong: #4a4c50;
  --text: #eceae4;
  --text-dim: #a3a099;
  --accent: #8fce6e;
  --accent-soft: #2c3d24;
  --row-hover: #1d1e20;
  --row-selected: #24301f;
  --panel-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  --bar: #8fce6e;
  --error-bg: #47211c;
  --error-text: #ffb4a6;
  --ok-bg: #243a1e;
  --ok-text: #b8e29a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
select {
  font: inherit;
  color: inherit;
}

/* --- Header ------------------------------------------------------------- */
/* ONE row. The first cell spans the sidebar + splitter (same --sidebar-width
   as .layout, same 8px side padding) so .header-main starts exactly where the
   book table starts, even while the splitter is dragged. */
.app-header {
  display: grid;
  grid-template-columns: calc(var(--sidebar-width, 220px) + 10px) minmax(0, 1fr);
  align-items: center;
  padding: 6px 8px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
}

.tiny-title {
  font-size: 11px;
  line-height: 1;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.home-link {
  color: var(--text);
  display: inline-flex;
  padding: 3px;
  border-radius: 6px;
}

.home-link:hover {
  background: var(--bg-soft);
}

/* left group | search (centered in the leftover space) | right group */
.header-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.icon-btn {
  font-size: 16px;
  line-height: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

/* The theme toggle stays flush to the right edge of the content. */
.theme-toggle {
  margin-right: 0;
}

/* Prominent "shown / total" count pill, just left of the Columns button. */
.header-count {
  margin-right: 4px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.search-input {
  width: 190px;
  max-width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
}

.switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  white-space: nowrap;
  flex: none;
}

.switch-track {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #c9c6bd;
  position: relative;
  transition: background 0.15s;
  flex: none;
}

[data-theme='dark'] .switch-track {
  background: #4a4c50;
}

.switch-track.on {
  background: var(--accent);
}

.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}

.switch-track.on .switch-knob {
  left: 16px;
}

.switch-state {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  min-width: 22px;
  text-align: left;
}

.upload-btn,
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}

.upload-btn:hover,
.menu-btn:hover,
.switch-btn:hover,
.icon-btn:hover {
  background: var(--bg-soft);
}

.menu-wrap {
  position: relative;
  flex: none;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 210px;
  /* Tall menus: every option is visible, no inner scrolling. */
  max-height: none;
  overflow: visible;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--panel-shadow);
  padding: 8px;
}

/* The Kindle Refresh help sits on the right edge; open it leftwards. */
.menu-panel-right {
  left: auto;
  right: 0;
}

.menu-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 2px 4px 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--bg-soft);
}

/* --- Category chips ----------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  border: 1px solid transparent;
  white-space: nowrap;
  flex: none;
}

button.chip:hover {
  filter: brightness(0.97);
}

.chip-active {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor inset;
  font-weight: 700;
}

/* OFF state of a category toggle: muted outline, no category fill. */
.chip-off {
  background: transparent;
  color: var(--text-dim);
  border: 1px dashed var(--border-strong);
  font-weight: 500;
}

.chip-clear {
  background: var(--bg-soft);
  color: var(--text-dim);
  border-color: var(--border-strong);
}

.chip-remove {
  font-size: 10px;
  padding: 0 1px;
  opacity: 0.75;
}

/* --- Source dropdown (Kindle | Uploaded | Both) --------------------------- */
.source-select {
  flex: none;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.source-select:hover {
  background: var(--bg-soft);
}

/* --- Layout: category sidebar | table -------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width, 220px) 10px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 0 8px;
  /* Set by the horizontal header splitter (contentTopOffset pref). */
  margin-top: var(--content-top-offset, 0px);
}

/* Draggable horizontal splitter: the border between header and content. */
.header-splitter {
  height: 8px;
  cursor: row-resize;
  touch-action: none;
  background: linear-gradient(var(--border), var(--border)) center / 100% 2px no-repeat;
}

.header-splitter:hover,
.header-splitter:focus-visible,
.header-splitter.dragging {
  background: linear-gradient(var(--border-strong), var(--border-strong)) center / 100% 4px no-repeat;
  outline: none;
}

.main-col {
  min-width: 0;
}

/* Shows every category; scrolls only when the viewport is shorter than the
   list (same height budget as the table). */
.category-sidebar {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 4px 8px 8px 4px;
  border-top: 1px solid var(--border);
}

.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 6px 2px;
}

.sidebar-add {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.sidebar-add input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg);
}

.sidebar-add button {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg-soft);
}

.sidebar-actions {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cat-chip {
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  text-align: left;
}

.cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-count {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

.cat-hide {
  flex: none;
  width: 20px;
  padding: 2px 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  opacity: 0.55;
}

.cat-hide:hover {
  opacity: 1;
  background: var(--bg-soft);
}

.cat-hide.active {
  opacity: 1;
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* Draggable splitter between the sidebar and the table. */
.sidebar-splitter {
  align-self: stretch;
  position: sticky;
  top: 8px;
  height: calc(100vh - 140px);
  cursor: col-resize;
  touch-action: none;
  background: linear-gradient(var(--border), var(--border)) center / 2px 100% no-repeat;
}

.sidebar-splitter:hover,
.sidebar-splitter:focus-visible,
.sidebar-splitter.dragging {
  background: linear-gradient(var(--border-strong), var(--border-strong)) center / 4px 100% no-repeat;
  outline: none;
}

/* Hidden categories: collapsed by default, bottom of the sidebar. */
.sidebar-hidden-cats {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-strong);
}

.hidden-cats-header {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 3px 2px;
}

.hidden-cats-caret {
  display: inline-block;
  width: 14px;
}

.hidden-cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-dim);
}

.hidden-cat-unhide {
  flex: none;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--text-dim);
}

.hidden-cat-unhide:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.cat-rename-field {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 13px;
}

.cat-rename,
.cat-remove,
.cat-remove-spacer {
  flex: none;
  width: 20px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}

.cat-rename,
.cat-remove {
  border-radius: 5px;
  padding: 2px 0;
  opacity: 0.55;
}

.cat-rename:hover {
  opacity: 1;
  background: var(--bg-soft);
  color: var(--text);
}

.cat-remove:hover {
  opacity: 1;
  background: var(--error-bg);
  color: var(--error-text);
}

/* --- Bulk bar + category cell editor --------------------------------------- */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
}

.bulk-bar[hidden] {
  display: none;
}

.bulk-bar select,
.bulk-bar button {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg);
}

.bulk-bar button.danger {
  border-color: var(--error-text);
  background: var(--error-bg);
  color: var(--error-text);
}

.bulk-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.row-check {
  margin: 0 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
}

.book-table tbody tr.row-checked {
  background: var(--row-selected);
}

.category-cell {
  cursor: pointer;
}

.category-popover {
  position: fixed;
  z-index: 45;
  min-width: 220px;
  max-width: 300px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--panel-shadow);
  padding: 8px;
}

.category-popover[hidden] {
  display: none;
}

/* One category per row: the assign checkbox grows, H / rename / remove sit at the right. */
.popover-cat-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.popover-cat-row .menu-item {
  flex: 1;
  min-width: 0;
}

.popover-add {
  margin: 8px 0 0;
}

/* --- Upload notes -------------------------------------------------------- */
.upload-notes {
  padding: 0 16px;
}

.upload-notes:empty {
  display: none;
}

.upload-note {
  padding: 7px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.note-ok {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.note-error {
  background: var(--error-bg);
  color: var(--error-text);
}

.note-dismiss {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: underline;
  margin-bottom: 8px;
}

/* --- Table --------------------------------------------------------------- */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 140px);
  border-top: 1px solid var(--border);
}

/* Never let the browser paint a text selection across the table (that was
   the "every cell is blue" look). Real text selection stays available in the
   modal. The table width is set inline from the column widths; fixed layout
   only honors <col> widths when the table has a definite width. */
.book-table {
  margin: 0; /* hug the sidebar; Fit may leave spare room on the right */
  border-collapse: collapse;
  table-layout: fixed;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.book-table ::selection {
  background: transparent;
}

.book-table td,
.book-table th,
.book-table tr {
  outline: none;
}

.book-table th,
.book-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  background: transparent;
}

/* Compact mode: every cell forced to a single line with ellipsis. */
.book-table.compact th,
.book-table.compact td {
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Non-compact: titles may wrap, but keep cells tidy. */
.book-table td {
  white-space: normal;
}

.book-table.compact .chip {
  white-space: nowrap;
}

/* Sticky header cells are positioned, so they are the containing block for
   the absolutely-positioned resize handle. overflow is visible here so the
   handle is not clipped; the label does its own ellipsis. */
.book-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 600;
  overflow: visible;
}

.book-table thead th.sortable {
  cursor: pointer;
}

.book-table thead th.dragging {
  opacity: 0.45;
}

/* Drop markers for column reorder: a bar on the side the column will land. */
.book-table thead th.drop-before {
  box-shadow: inset 3px 0 0 var(--accent);
}

.book-table thead th.drop-after {
  box-shadow: inset -3px 0 0 var(--accent);
}

.th-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
}

.resize-handle:hover {
  background: var(--accent);
  opacity: 0.35;
}

body.is-resizing,
body.is-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

.book-table tbody tr {
  cursor: pointer;
}

.book-table tbody tr:hover {
  background: var(--row-hover);
}

/* Only the open book's row gets the soft green selected background. */
.book-table tbody tr.row-selected {
  background: var(--row-selected);
}

/* Hidden books (visible only with Show hidden on) are dimmed, but the action
   column stays at full strength so Unhide remains easy to see. */
.book-table tbody tr.row-hidden-book td:not(.action-col) {
  opacity: 0.45;
}

/* One fixed-width column: [select] [hide/unhide] [delete], three equal slots. */
.action-col {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  vertical-align: middle;
}

.action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.action-slot,
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
}

.action-col .row-check {
  margin: 0;
}

.action-btn {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.action-btn:hover,
.action-btn:focus-visible {
  color: var(--text);
  background: var(--bg-soft);
}

.action-btn.action-unhide {
  color: var(--accent);
}

/* --- Inline-editable cells (Title / Author / Added / Print length / Publication date) ---
   Only the text itself starts an edit (text cursor); the rest of the cell is
   ordinary row area and opens the book modal. */
.editable-cell .editable-value {
  min-width: 0;
  cursor: text;
}

.edit-pencil {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 5px;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--accent);
  cursor: pointer;
  opacity: 0.85;
}

.edit-pencil:hover {
  opacity: 1;
  background: var(--row-selected);
}

.cell-input {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 5px;
}

.field-menu {
  position: fixed;
  z-index: 46;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--panel-shadow);
}

.field-menu button {
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.field-menu button:hover {
  background: var(--row-selected);
}

.cell-title {
  font-weight: 550;
}

.cell-dim {
  color: var(--text-dim);
}

.source-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
}

.source-exact {
  background: var(--accent-soft);
  color: var(--accent);
}

.source-estimated {
  background: var(--bg-soft);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* --- Sidebar stats block ----------------------------------------------------- */
.sidebar-stats {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-strong);
  font-size: 11px;
  color: var(--text-dim);
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* One line of the stats block; most are buttons that filter the table. */
.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.stats-row {
  cursor: pointer;
}

button.stats-row:hover {
  background: rgba(128, 128, 128, 0.15);
}

button.stats-row.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 700;
}

.stats-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-fill {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.stats-fill-btn {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
}

.stats-fill-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Selected book modal ---------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(20, 20, 15, 0.5);
}

body.modal-open {
  overflow: hidden;
}

.modal-dialog {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  user-select: text;
  -webkit-user-select: text;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 12px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-heading {
  flex: 1;
  min-width: 0;
}

.modal-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  white-space: nowrap;
}

.modal-action:hover {
  background: var(--bg-soft);
}

.modal-close {
  color: var(--text-dim);
  font-size: 16px;
  padding: 5px 9px;
  border-radius: 8px;
}

.modal-close:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.modal-body {
  overflow-y: auto;
  padding: 16px 20px 20px;
}

/* Metadata + categories on the left, chapter chart + list on the right;
   they stack on narrow screens. */
.modal-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px;
}

/* The metadata/chart columns stack on narrow screens. (The page layout itself
   switches at 900px through body.layout-mobile, see the end of this file.) */
@media (max-width: 760px) {
  .modal-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.panel-title {
  font-size: 19px;
  font-weight: 700;
}

.panel-subtitle {
  color: var(--text-dim);
  margin-top: 2px;
}

.meta-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.meta-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 550;
  padding: 3px 10px 3px 0;
  white-space: nowrap;
  vertical-align: top;
}

.meta-table td {
  padding: 3px 0;
}

/* --- Chapter chart --------------------------------------------------------- */
.chart-section {
  margin-top: 0;
}

.chart-section h3,
.category-editor h3 {
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 8px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 130px;
  border-bottom: 1px solid var(--border-strong);
  padding: 0 1px;
}

.chart-bar {
  flex: 1 1 0;
  min-width: 3px;
  background: var(--bar);
  border-radius: 2px 2px 0 0;
}

.chart-bar:hover {
  filter: brightness(1.12);
}

.chart-empty {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0;
}

.chapter-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 42vh;
  overflow-y: auto;
  font-size: 12.5px;
}

.chapter-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2.5px 0;
  border-bottom: 1px dotted var(--border);
}

.chapter-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-list li {
  align-items: center;
}

.chapter-x,
.chapter-undo {
  flex: none;
  color: var(--text-dim);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
}

.chapter-x:hover,
.chapter-undo:hover {
  color: var(--error-text);
  background: var(--error-bg);
}

.chapter-undo:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.excluded-heading {
  margin-top: 14px;
}

.excluded-list {
  max-height: 20vh;
}

.struck {
  text-decoration: line-through;
  color: var(--text-dim);
}

.chapter-words {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  flex: none;
}

/* Hierarchy: indent per level; parts are group headers; matter is dimmed. */
.chapter-row {
  padding-left: calc(var(--level, 0) * 14px);
}

.chapter-row .chapter-name {
  white-space: pre;
}

.chapter-row.kind-part {
  margin-top: 6px;
  padding-top: 4px;
  font-weight: 650;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border-strong);
}

.chapter-row.kind-part .chapter-words {
  color: var(--accent);
  font-weight: 650;
}

.chapter-row.kind-matter .chapter-name,
.chapter-row.kind-section .chapter-name {
  color: var(--text-dim);
}

/* --- Category editor -------------------------------------------------------- */
.category-editor {
  margin-top: 18px;
}

.editor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-add {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.editor-add select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg);
}

.editor-add button {
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg-soft);
}

.fatal-error {
  padding: 24px;
  color: var(--error-text);
}

/* --- Columns menu actions, delete buttons -------------------------------- */
.menu-actions {
  display: flex;
  gap: 6px;
  padding: 0 4px 6px;
}

.menu-action-btn {
  flex: 1;
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  white-space: nowrap;
}

.menu-action-btn:hover {
  background: var(--bg-soft);
}

.modal-delete {
  color: #c0392b;
}

/* --- Kindle Refresh ------------------------------------------------- */
.help-title {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.help-path {
  display: block;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--bg-soft);
  font-size: 12px;
  word-break: break-all;
}

.help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.help-note {
  font-size: 12px;
  color: var(--text-dim);
}

#refresh-help {
  width: 330px;
  padding: 10px;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--ok-bg);
  color: var(--ok-text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  z-index: 50;
}

/* "X of Y uploaded" message; sits above the toast position, fades at the end. */
.upload-progress {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 600;
  z-index: 50;
  transition: opacity 0.5s ease;
}

.upload-progress.fading {
  opacity: 0;
}

.upload-progress[hidden] {
  display: none;
}

.toast[hidden] {
  display: none;
}

/* Book data column: an info button that opens the book modal. */
.info-btn {
  display: inline-flex;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.info-btn:hover {
  background: var(--row-selected);
}

/* Header rename: the pencil appears on header hover (always when renamed). */
.th-pencil {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: none;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
}

.book-table thead th:hover .th-pencil,
.th-pencil-set {
  display: inline-flex;
}

.th-rename-field {
  width: calc(100% - 12px);
  box-sizing: border-box;
  padding: 2px 5px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 5px;
}

/* --- Mobile / tablet layout ------------------------------------------------
   Everything below only applies with body.layout-mobile (set by app.js when
   the viewport is under 900px and "Desktop view" is not forced), so the
   desktop layout above is untouched. Controls that live in the ⋯ menu on
   mobile are hidden here but stay in the DOM: the menu forwards to them. */

/* Desktop never shows the mobile-only controls. */
.more-wrap,
.cats-toggle,
.mobile-view-btn {
  display: none;
}

/* Forced desktop on a small screen: a small way back to the mobile layout. */
body.layout-forced-desktop .mobile-view-btn {
  display: block;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 60;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: var(--panel-shadow);
  font-size: 12px;
  font-weight: 600;
}

/* One compact header row: home, count, search, theme toggle, ⋯. The three
   wrapper groups dissolve (display: contents) so their children flow in the
   single flex row in DOM order. */
body.layout-mobile .app-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

body.layout-mobile .header-brand,
body.layout-mobile .header-main {
  display: contents;
}

body.layout-mobile .header-left,
body.layout-mobile .header-right {
  display: contents;
}

body.layout-mobile .header-center {
  display: block;
  flex: 1;
  min-width: 0;
  order: 0;
}

body.layout-mobile .tiny-title,
body.layout-mobile #columns-btn,
body.layout-mobile #source-select,
body.layout-mobile #show-hidden-toggle,
body.layout-mobile .upload-btn,
body.layout-mobile #refresh-btn,
body.layout-mobile #refresh-help,
body.layout-mobile #compact-toggle,
body.layout-mobile #subtitle-toggle,
body.layout-mobile #columns-fit-content,
body.layout-mobile #columns-fit-headers,
body.layout-mobile .header-splitter,
body.layout-mobile .sidebar-splitter,
body.layout-mobile .resize-handle,
body.layout-mobile .th-pencil {
  display: none;
}

body.layout-mobile .header-count {
  margin-right: 0;
  padding: 4px 10px;
  font-size: 14px;
  flex: none;
}

body.layout-mobile .search-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
}

body.layout-mobile .home-link,
body.layout-mobile .icon-btn,
body.layout-mobile .more-btn {
  flex: none;
}

body.layout-mobile .more-wrap {
  display: block;
}

body.layout-mobile .more-btn {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
}

/* The ⋯ menu and the Columns list open as panels under the header. */
body.layout-mobile .more-menu {
  min-width: 250px;
  max-width: calc(100vw - 20px);
  z-index: 60;
}

body.layout-mobile #columns-menu {
  position: fixed;
  top: 54px;
  right: 10px;
  left: auto;
  width: 260px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  z-index: 60;
}

body.layout-mobile #columns-menu .menu-item {
  padding: 9px 6px;
}

.more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border-radius: 7px;
  text-align: left;
}

.more-item:hover {
  background: var(--bg-soft);
}

.more-item .mi-icon {
  width: 18px;
  text-align: center;
  color: var(--text-dim);
  flex: none;
}

.more-item .mi-label {
  flex: 1;
}

.more-item .mi-meta {
  color: var(--text-dim);
  font-size: 12px;
}

/* Categories: a collapsible drawer instead of the left sidebar. */
body.layout-mobile .layout {
  display: block;
  padding: 0;
  margin-top: 0; /* ignore the desktop header-splitter offset */
}

body.layout-mobile .cats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 10px 0;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-soft);
  font-weight: 600;
}

body.layout-mobile .cats-caret {
  color: var(--text-dim);
  font-size: 11px;
}

body.layout-mobile .category-sidebar {
  display: none;
  position: static;
  max-height: 50vh;
  margin: 8px 10px 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

body.layout-mobile .layout.cats-open .category-sidebar {
  display: block;
}

/* Bigger tap targets for the per-category controls. */
body.layout-mobile .cat-chip {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
}

body.layout-mobile .cat-hide,
body.layout-mobile .cat-rename,
body.layout-mobile .cat-remove {
  width: 32px;
  height: 32px;
}

/* Table: fills the screen, taller tap-friendly rows. */
body.layout-mobile .table-wrap {
  max-height: none;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
}

body.layout-mobile .book-table th,
body.layout-mobile .book-table td {
  padding-top: 14px;
  padding-bottom: 14px;
}

body.layout-mobile .book-table.compact th,
body.layout-mobile .book-table.compact td {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.layout-mobile .book-table thead th {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.layout-mobile .action-col .row-check {
  width: 18px;
  height: 18px;
}

body.layout-mobile .action-slot,
body.layout-mobile .action-btn {
  width: 24px;
  height: 24px;
}

body.layout-mobile .action-cell {
  gap: 3px;
}

body.layout-mobile .info-btn {
  padding: 6px;
}

/* Book window: full screen. */
body.layout-mobile .modal-backdrop {
  padding: 0;
}

body.layout-mobile .modal-dialog {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.layout-mobile .modal-header {
  padding: 12px 12px 10px 14px;
}

body.layout-mobile .modal-body {
  flex: 1;
  padding: 14px;
}