:root {
  --page-bg: #f5f7fa;
  --surface: #ffffff;
  --line: #dce1e7;
  --muted: #687385;
  --ink: #202733;
  --accent: #246bfe;
  --accent-soft: #e8f0ff;
  --success-soft: #e7f6ee;
}

html[data-theme=dark] {
  --page-bg: #111318;
  --surface: #191d24;
  --line: #343b49;
  --muted: #a0a8b7;
  --ink: #eef2f7;
  --accent: #7aa7ff;
  --accent-soft: #243756;
  --success-soft: #1d3b2d;
  --badge-soft-ink: #ffffff;
  --badge-private-ink: #ffffff;
}
html[data-theme=dark] .navbar.bg-white {
  background-color: var(--surface) !important;
}
html[data-theme=dark] .navbar-brand,
html[data-theme=dark] .nav-link {
  color: var(--ink);
}

body {
  background: var(--page-bg);
  color: var(--ink);
}

.navbar {
  border-bottom: 1px solid var(--line);
}

.app-shell {
  max-width: 1440px;
}

.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.page-title {
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: 0;
}

.muted-label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: uppercase;
}

.table thead th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.book-thumb {
  align-items: center;
  background: linear-gradient(135deg, #eef2f7, #ffffff);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #7a8798;
  display: flex;
  height: 64px;
  justify-content: center;
  object-fit: cover;
  width: 44px;
}

img.book-thumb {
  background: #ffffff;
}

.book-cover-large {
  background: #eef2f7;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 420px;
  object-fit: cover;
  width: 100%;
}

.badge-soft {
  background: var(--accent-soft);
  color: var(--badge-soft-ink, #174ea6);
  font-weight: 600;
}

.badge-private {
  background: var(--success-soft);
  color: var(--badge-private-ink, #146c43);
  font-weight: 600;
}

.table-row-title {
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.table-row-title:hover {
  color: var(--accent);
}

.form-text {
  color: var(--muted);
}

.scanner-frame {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.scanner-frame video {
  display: block;
  min-height: 260px;
  object-fit: cover;
  width: 100%;
}

.lookup-cover {
  height: 112px;
  width: 76px;
}

.lookup-cover-placeholder {
  height: 112px;
  width: 76px;
}

@media (max-width: 991.98px) {
  .page-heading {
    align-items: flex-start !important;
  }
  .page-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #bookFilters {
    position: static !important;
  }
}
@media (max-width: 767.98px) {
  .app-shell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .page-heading {
    flex-direction: column;
  }
  .page-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .page-actions .btn {
    flex: 1 1 auto;
  }
  .surface.p-4 {
    padding: 1rem !important;
  }
  .book-cover-large {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 260px;
    max-width: 180px;
  }
  .table-responsive {
    overflow: visible;
  }
  [data-book-table] {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }
  [data-book-table] thead {
    display: none;
  }
  [data-book-table],
  [data-book-table] tbody,
  [data-book-table] tr,
  [data-book-table] td {
    display: block;
    width: 100%;
  }
  [data-book-table] tbody tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.35rem 0.75rem;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }
  [data-book-table] td {
    border: 0;
    padding: 0;
  }
  .book-cover-cell {
    align-items: center;
    display: flex !important;
    grid-row: 1/span 4;
    justify-content: center;
  }
  .book-title-cell {
    grid-column: 2/4;
  }
  .book-authors-cell,
  .book-series-cell,
  .book-tags-cell,
  .book-status-cell,
  .book-location-cell,
  .book-loan-cell {
    grid-column: 2/4;
  }
  .book-year-cell,
  .book-language-cell {
    color: var(--muted);
    font-size: 0.9rem;
    grid-column: 2/4;
  }
  [data-book-table] .book-year-cell {
    display: none !important;
  }
  .book-actions-cell {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  [data-book-table] td[data-label]::before {
    color: var(--muted);
    content: attr(data-label) ": ";
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  .book-authors-cell::before,
  .book-year-cell::before,
  .book-language-cell::before {
    content: "" !important;
  }
  .book-series-cell:has(.text-secondary:only-child),
  .book-tags-cell:has(.text-secondary:only-child),
  .book-location-cell:has(.text-secondary:only-child),
  .book-loan-cell:has(.text-secondary:only-child) {
    display: none;
  }
  .detail-copy-table thead {
    display: none;
  }
  .detail-copy-table,
  .detail-copy-table tbody,
  .detail-copy-table tr,
  .detail-copy-table td {
    display: block;
    width: 100%;
  }
  .detail-copy-table tbody tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }
  .detail-copy-table td {
    border: 0;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  .detail-copy-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  .table > :not(caption) > * > * {
    background-color: var(--surface);
  }
}
@media (max-width: 575.98px) {
  .navbar .container-fluid {
    gap: 0.5rem;
  }
  .navbar .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .book-thumb {
    height: 72px;
    width: 50px;
  }
}