/* =====================
   Dark theme tokens
   ===================== */
:root {
  --bg:        #1a1a1a;
  --bg-card:   #242424;
  --bg-input:  #2e2e2e;
  --bg-hover:  #2a2a2a;
  --border:    #3a3a3a;
  --text:      #e8e8e8;
  --text-muted:#9a9a9a;
  --accent:    #5b8dee;
  --danger:    #e05c5c;
}

/* =====================
   Base
   ===================== */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* =====================
   Navbar
   ===================== */
.navbar.bg-dark {
  background-color: #111 !important;
  border-bottom: 1px solid var(--border);
}

/* =====================
   Cards
   ===================== */
.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  border-radius: 0.5rem;
  color: var(--text) !important;
}
.card-body, .card-header, .card-footer { color: var(--text) !important; }

/* =====================
   List groups
   ===================== */
.list-group-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.list-group-item:hover { background-color: var(--bg-hover) !important; }

/* =====================
   Text utilities
   ===================== */
.text-muted { color: var(--text-muted) !important; }
.text-dark  { color: var(--text) !important; }
.text-body  { color: var(--text) !important; }

/* =====================
   Headings & paragraphs
   ===================== */
h1, h2, h3, h4, h5, h6, p, span, div, li, td, th, label { color: inherit; }

/* =====================
   Links
   ===================== */
a { color: var(--accent); }
a:hover { color: #7aa3f5; }
a.text-decoration-none.text-dark { color: var(--text) !important; }

/* =====================
   Forms
   ===================== */
.form-control, .form-select, .form-check-input {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-input) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(91,141,238,0.25) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-label { color: var(--text) !important; }
.form-text  { color: var(--text-muted) !important; }

/* =====================
   Buttons
   ===================== */
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-secondary {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text) !important;
}

/* =====================
   Dropdowns
   ===================== */
.dropdown-menu {
  background-color: #1e1e1e !important;
  border-color: var(--border) !important;
}
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bg-hover) !important;
  color: var(--text) !important;
}
.dropdown-divider { border-color: var(--border) !important; }
.dropdown-item.text-danger { color: var(--danger) !important; }

/* =====================
   Alerts
   ===================== */
.alert { border-color: var(--border) !important; }
.alert-success { background-color: #1a2e1a !important; color: #6fcf6f !important; border-color: #2a4a2a !important; }
.alert-danger, .alert-error { background-color: #2e1a1a !important; color: #e07878 !important; border-color: #4a2a2a !important; }
.alert-info  { background-color: #1a2535 !important; color: #7ab8e0 !important; border-color: #1e3a55 !important; }
.alert-warning { background-color: #2e2510 !important; color: #d4b060 !important; border-color: #4a3d1a !important; }

/* =====================
   Badges
   ===================== */
.badge.bg-light { background-color: #333 !important; color: var(--text) !important; }
.badge.bg-secondary { background-color: #444 !important; }
.bg-light { background-color: var(--bg-card) !important; }

/* =====================
   Tables
   ===================== */
.table { color: var(--text) !important; }
.table > :not(caption) > * > * {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* =====================
   Breadcrumbs
   ===================== */
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--text-muted); }

/* =====================
   Footer
   ===================== */
footer.bg-dark {
  background-color: #111 !important;
  border-top: 1px solid var(--border);
}

/* =====================
   Book card hover lift
   ===================== */
.book-card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.book-card-hover:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.4) !important; }

/* =====================
   Autocomplete dropdown
   ===================== */
.autocomplete-dropdown {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 0.375rem;
}
.autocomplete-dropdown .list-group-item:hover { background-color: var(--bg-hover) !important; cursor: pointer; }
.autocomplete-dropdown .list-group-item.active { background-color: #2c3a50 !important; border-color: var(--border) !important; color: var(--text) !important; }

/* =====================
   Fix Bootstrap alert tag mapping
   ===================== */
.alert-error { --bs-alert-color: #e07878; --bs-alert-bg: #2e1a1a; --bs-alert-border-color: #4a2a2a; }

/* =====================
   Mobile bottom nav
   ===================== */
@media (max-width: 767.98px) {
  /* Hide icon links from top navbar on mobile */
  .navbar .nav-icons-top { display: none !important; }

  /* Bottom nav bar */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #111;
    border-top: 1px solid var(--border);
    height: 56px;
    align-items: stretch;
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.6rem;
    gap: 2px;
    padding: 6px 0;
    transition: color 0.15s;
  }
  .bottom-nav a:hover, .bottom-nav a.active { color: var(--accent); }
  .bottom-nav a i { font-size: 1.25rem; }

  /* Push page content above the bottom nav */
  main { padding-bottom: 84px !important; }
  footer { display: none; }
}

@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
  .navbar .nav-icons-top { display: flex !important; }
}