/* ── Design tokens ────────────────────────────────────────── */
:root {
  --bs-primary:           #2d6a4f;
  --bs-primary-rgb:       45, 106, 79;
  --bs-secondary:         #8b7355;
  --bs-secondary-rgb:     139, 115, 85;
  --bs-success:           #52b788;
  --bs-success-rgb:       82, 183, 136;
  --bs-danger:            #c1440e;
  --bs-danger-rgb:        193, 68, 14;
  --bs-body-bg:           #f7f3ee;
  --bs-body-color:        #2a2a2a;
  --bs-body-font-family:  'Inter', system-ui, sans-serif;
  --bs-border-radius:     .5rem;
  --bs-border-radius-sm:  .35rem;
  --bs-border-radius-lg:  .75rem;
  --bs-card-border-color: rgba(0,0,0,.06);

  --color-amber:   #e9a84c;
  --color-parchment: #f7f3ee;
  --color-ink:     #1c1c1e;
  --shadow-card:   0 2px 8px rgba(0,0,0,.07), 0 0 1px rgba(0,0,0,.06);
  --shadow-card-hover: 0 6px 20px rgba(0,0,0,.10), 0 0 1px rgba(0,0,0,.06);
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  background: var(--color-parchment);
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: var(--color-ink) !important;
  border-bottom: 3px solid var(--bs-primary);
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.navbar-brand {
  font-size: 1.4rem;
  letter-spacing: -.5px;
  color: #fff !important;
}

.navbar .form-control {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 2rem;
}

.navbar .form-control::placeholder { color: rgba(255,255,255,.45); }
.navbar .form-control:focus {
  background: rgba(255,255,255,.14);
  border-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(45,106,79,.35);
}

.navbar .btn-outline-light {
  border-radius: 2rem;
  font-size: .8rem;
  padding: .35rem .9rem;
}

/* KOSync doc rows: link form wraps to its own full-width row on small screens */
.kosync-link-action { width: 100%; }
@media (min-width: 576px) {
  .kosync-link-action { width: auto; }
}

/* On mobile the search bar wraps to its own full-width row below brand+avatar */
.navbar-search-form { width: 100%; }
@media (min-width: 768px) {
  .navbar-search-form { width: auto; }
}

.navbar .dropdown-menu {
  border-radius: .6rem;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: .4rem;
}

.navbar .dropdown-item {
  border-radius: .35rem;
  font-size: .875rem;
  padding: .45rem .75rem;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-card);
  border-radius: .65rem;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-radius: .65rem .65rem 0 0 !important;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  padding: .85rem 1.25rem;
}
.card-header .btn,
.card-header .badge {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  border-radius: 2rem;
  font-weight: 500;
  font-size: .85rem;
  padding: .4rem 1.1rem;
  transition: all .15s ease;
}

.btn-primary {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: #245a41;
  border-color: #245a41;
  box-shadow: 0 4px 12px rgba(45,106,79,.3);
}
/* Override Bootstrap's default blue pressed/focus-ring state so our green
   primary buttons stay green when clicked or when a collapse they control
   is open. */
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-primary:focus-visible,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  background: #245a41 !important;
  border-color: #245a41 !important;
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(45,106,79,.35) !important;
}

.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
/* Pressed / focused / dropdown-open states for outline-primary — keep green
   instead of Bootstrap's default blue fallback. */
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:focus-visible,
.btn-check:checked + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle {
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(45,106,79,.35) !important;
}

.btn-success { background: var(--bs-success); border-color: var(--bs-success); }
.btn-outline-secondary { color: #6c757d; }
/* Pressed / focused / dropdown-open states for outline-secondary — keep the
   app's muted gray-brown instead of Bootstrap's blue focus ring. */
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-outline-secondary:focus-visible,
.btn-check:checked + .btn-outline-secondary,
.show > .btn-outline-secondary.dropdown-toggle {
  background: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(108,117,125,.3) !important;
}

/* ── Nav pills (status filter) ────────────────────────────── */
.nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--bs-secondary);
  border-radius: 2rem;
  font-size: .85rem;
  padding: .35rem .9rem;
  font-weight: 500;
}

.nav-pills .nav-link.active {
  background: var(--bs-primary);
}

/* ── Inline "clear" (X) inside the book-list filter input ─── */
.filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  color: var(--bs-danger);
}
.filter-clear svg { display: block; }
.filter-clear:hover {
  color: #fff !important;
  background: var(--bs-danger);
}
/* Hide the browser's built-in search clear button so it doesn't duplicate
   our styled one. */
input[type="search"]::-webkit-search-cancel-button { display: none; }
input[type="search"]::-webkit-search-decoration { display: none; }

/* ── Filter/sort toggle (book list) ───────────────────────── */
/* Matches the brown "inactive tab" look so it reads as part of the
   nav-pills row rather than a foreign button. */
.btn-tab-tool {
  color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
  background: transparent;
}
.btn-tab-tool:hover,
.btn-tab-tool:focus-visible {
  color: #fff;
  background: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

/* ── Dropdowns (book list sort, etc.) ─────────────────────── */
/* Keep the outline-secondary toggle looking outlined even when the menu
   is open — Bootstrap otherwise fills it with a dark "pressed" state. */
.btn-outline-secondary.dropdown-toggle:focus,
.btn-outline-secondary.dropdown-toggle:active,
.btn-outline-secondary.dropdown-toggle.show {
  background: transparent;
  color: #6c757d;
  border-color: #6c757d;
  box-shadow: none;
}

.dropdown-menu {
  border-radius: .6rem;
  border: 1px solid var(--bs-card-border-color);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: .4rem;
  font-size: .875rem;
}

.dropdown-item {
  border-radius: .35rem;
  padding: .45rem .75rem;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover {
  background: var(--bs-primary);
  /* Use !important so utility classes like .text-danger (which carry
     !important themselves) don't keep a red color on the green hover. */
  color: #fff !important;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  border-radius: 2rem;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ── Progress bar ─────────────────────────────────────────── */
.progress { background: #e9e4dd; border-radius: 2rem; }
.progress-bar { background: var(--bs-primary); border-radius: 2rem; }

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: .5rem;
  border-color: #ddd6cc;
  background: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(45,106,79,.18);
}

/* ── Book covers ──────────────────────────────────────────── */
.book-cover {
  width: 60px; height: 85px; object-fit: cover;
  border-radius: 3px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.18);
}

.book-cover-lg {
  width: 120px; height: 170px; object-fit: cover;
  border-radius: 4px;
  box-shadow: 4px 6px 16px rgba(0,0,0,.20);
}

.book-cover-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #e9e4dd; color: #a89880; border-radius: 3px; font-size: 1.5rem;
}

/* ── Stars ────────────────────────────────────────────────── */
.stars        { color: var(--color-amber); letter-spacing: -2px; white-space: nowrap; flex-shrink: 0; }
.stars-empty  { color: #ddd6cc; }

.star-picker .star-label {
  font-size: 1.6rem; color: #ddd6cc; cursor: pointer; transition: color .1s;
}
.star-picker:hover .star-label { color: #ddd6cc; }
.star-picker .star-label:hover,
.star-picker .star-label:hover ~ .star-label { color: var(--color-amber); }
.star-picker:not(:hover) .star-label:has(input:checked),
.star-picker:not(:hover) .star-label:has(input:checked) ~ .star-label { color: var(--color-amber); }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { font-size: .85rem; }
.breadcrumb-item a { color: var(--bs-primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert { border-radius: .6rem; border: none; }
.alert-success { background: #d8f0e6; color: #1a5c38; }
.alert-warning { background: #fdf0d5; color: #7a4f00; }
.alert-danger  { background: #fde8e0; color: #8b2500; }

/* ── Status badges ────────────────────────────────────────── */
.status-want     { background: #e8dcc8; color: #6b5a3e; }
.status-reading  { background: var(--color-amber); color: #fff; }
.status-finished { background: var(--bs-primary);  color: #fff; }
.status-dnf      { background: #c05c3a; color: #fff; }

/* ── Misc ─────────────────────────────────────────────────── */
a { color: var(--bs-primary); }
.text-muted { color: #8b7355 !important; }