/* Additional tweaks */
.card-img-top { object-fit: cover; height: 160px; }
.card { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.category-badge { font-size: .75rem; }
.grid { row-gap: 1.5rem; }
/* Refresh button overlay */
.thumb-refresh-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  opacity: 0.85;
  line-height: 1;
}
.thumb-refresh-btn:hover { opacity: 1; }

/* Dark theme (scoped) */
:root[data-theme='dark'] body { background-color: #121212; color: #eaeaea; }
:root[data-theme='dark'] .card { background-color: #1e1e1e; border: 1px solid #2a2a2a; }
:root[data-theme='dark'] .card-title { color: #f5f5f5; font-weight: 600; }
:root[data-theme='dark'] .card .text-muted { color: #9aa0a6 !important; }
:root[data-theme='dark'] .badge.bg-secondary { background-color: #3a86ff !important; color: #fff; }
:root[data-theme='dark'] .category-badge { border: 1px solid rgba(255,255,255,0.2); font-weight: 600; }
:root[data-theme='dark'] .border-top { border-top-color: #2a2a2a !important; }

/* Improve readability of card notes in dark mode */
:root[data-theme='dark'] .card .small,
:root[data-theme='dark'] .card p,
:root[data-theme='dark'] .card .card-body { color: #dddddd !important; }

/* Navbar (light default) */
.navbar { background: transparent; border-bottom: none; }
.navbar > .container, .navbar > .container-fluid { background-color: #f8f9fa; border-bottom: 1px solid #e5e7eb; }
.navbar .navbar-brand, .navbar .nav-link { color: #212529; }
.navbar .nav-link:hover { color: #0d6efd; }
.navbar .btn-outline-secondary { color: #212529; border-color: #6c757d; }

/* Navbar (dark) */
:root[data-theme='dark'] .navbar { background: transparent; border-bottom-color: transparent; }
:root[data-theme='dark'] .navbar > .container, :root[data-theme='dark'] .navbar > .container-fluid { background-color: #1a1a1a; border-bottom-color: #2a2a2a; }
:root[data-theme='dark'] .navbar .navbar-brand, :root[data-theme='dark'] .navbar .nav-link { color: #eaeaea; }
:root[data-theme='dark'] .navbar .nav-link:hover { color: #9ec5fe; }
:root[data-theme='dark'] .navbar .btn-outline-secondary { color: #eaeaea; border-color: #6c757d; }

/* Navbar toggler icon visibility */
.navbar .navbar-toggler-icon { filter: invert(0); }
:root[data-theme='dark'] .navbar .navbar-toggler-icon { filter: invert(1); }

/* Forms */
:root[data-theme='dark'] .form-control, :root[data-theme='dark'] .form-select { background-color: #1b1b1b !important; color: #eaeaea !important; border-color: #333; }
:root[data-theme='dark'] .form-control::placeholder { color: #9aa0a6; }
:root[data-theme='dark'] .form-select option { background: #222; color: #eaeaea; }
:root[data-theme='dark'] .input-group-text { background-color: #2a2a2a; color: #ddd; border-color: #333; }
:root[data-theme='dark'] .input-group .btn { border-color: #333; }
:root[data-theme='dark'] .form-label { color: #e0e0e0; }
:root[data-theme='dark'] .form-control:focus, :root[data-theme='dark'] .form-select:focus { color: #ffffff !important; background-color: #1b1b1b !important; border-color: #4c8bf5; box-shadow: 0 0 0 .2rem rgba(76,139,245,.25); }
/* Fix WebKit autofill on dark */
:root[data-theme='dark'] input:-webkit-autofill,
:root[data-theme='dark'] input:-webkit-autofill:hover,
:root[data-theme='dark'] input:-webkit-autofill:focus,
:root[data-theme='dark'] textarea:-webkit-autofill,
:root[data-theme='dark'] select:-webkit-autofill {
  -webkit-text-fill-color: #eaeaea !important;
  caret-color: #eaeaea;
  -webkit-box-shadow: 0 0 0px 1000px #1b1b1b inset;
  box-shadow: 0 0 0px 1000px #1b1b1b inset;
}

/* Offcanvas & lists */
:root[data-theme='dark'] .offcanvas { background-color: #1a1a1a; color: #eaeaea; }
:root[data-theme='dark'] .list-group-item { background-color: #1f1f1f; color: #eaeaea; border-color: #2a2a2a; }
:root[data-theme='dark'] .list-group-item a { color: #eaeaea; text-decoration: none; }
:root[data-theme='dark'] .list-group-item:hover { background-color: #252525; }

/* Footer */
:root[data-theme='dark'] footer { color: #bbb; background: #0f0f0f; }

/* Buttons on dark */
:root[data-theme='dark'] .btn-outline-dark { color: #eaeaea; border-color: #555; }
:root[data-theme='dark'] .btn-outline-dark:hover { background-color: #2a2a2a; }

/* Normalize toolbar button heights */
.btn { line-height: 1.2; }

/* Count label readability */
:root[data-theme='dark'] .count-label { color: #cfd8dc; }

/* Tables in dark mode */
:root[data-theme='dark'] .table { color: #eaeaea; --bs-table-bg: transparent; }
:root[data-theme='dark'] .table thead th { color: #f1f3f5; border-bottom-color: #2a2a2a; }
:root[data-theme='dark'] .table tbody td { color: #eaeaea !important; }
:root[data-theme='dark'] .table td, :root[data-theme='dark'] .table th { border-color: #2a2a2a !important; }
:root[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: #1f1f1f; color: #eaeaea; }
:root[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(even) { background-color: #181818; }

/* Dark mode link and code colors for readability */
:root[data-theme='dark'] a { color: #cfe2ff; }
:root[data-theme='dark'] a:hover { color: #9ec5fe; }
:root[data-theme='dark'] code, :root[data-theme='dark'] pre { color: #cfe2ff; background: transparent; }

/* List group in dark mode (sidebar categories) */
:root[data-theme='dark'] .list-group-item { background-color: #1f1f1f; color: #eaeaea; border-color: #2a2a2a; }
:root[data-theme='dark'] .list-group-item:hover { background-color: #262626; color: #ffffff; }