/* 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;
}

@media (max-width: 760px) {
  /* Narrow screens: the sidebar stacks above the table. */
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-sidebar {
    position: static;
    max-height: 240px;
  }

  .sidebar-splitter {
    display: none;
  }

  /* No sidebar column to align with: stack the brand above a wrapping row. */
  .app-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .header-main {
    flex-wrap: wrap;
  }

  .header-center {
    order: 3;
    flex-basis: 100%;
  }

  .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;
}