/* ── Theme variables ─────────────────────────────────────────────────────── */
:root {
  --bg:           #ece8e0;
  --bg-card:      #fff;
  --bg-input:     #fff;
  --text:         #1a1a1a;
  --text-muted:   #888;
  --text-link:    #888;
  --border:       #ddd9d1;
  --heading:      #2d2d2a;
  --accent:       #1e3a5c;
  --badge-person-bg:    #ece8df;
  --badge-person-text:  #444;
  --badge-person-hover: #ddd9cf;
  --badge-cat-bg:       #e5eeff;
  --badge-cat-text:     #0835c4;
  --badge-cat-hover:    #d0e0ff;
  /* per-category colors — light */
  --cat1-bg: #dde8ff; --cat1-text: #0044cc; --cat1-hover: #c8d8ff;
  --cat2-bg: #2e2e2e; --cat2-text: #f0f0f0; --cat2-hover: #424242;
  --cat3-bg: #fff3cc; --cat3-text: #7a5c00; --cat3-hover: #ffe8a0;
  --cat4-bg: #f8d0d0; --cat4-text: #800000; --cat4-hover: #f2baba;
  --cat5-bg: #ffe0c0; --cat5-text: #a04300; --cat5-hover: #ffd0a0;
  --cat6-bg: #e0f5e0; --cat6-text: #1a6b1a; --cat6-hover: #cceccc;
  --cat7-bg: #fcc8e4; --cat7-text: #bb0055; --cat7-hover: #f8b0d8;
  --cat9-bg: #eed8ff; --cat9-text: #6200aa; --cat9-hover: #e2c4ff;
  --month-link:         #555;
  --month-active-bg:    #1e3a5c;
  --month-active-text:  #fff;
  --fav-inactive: #ccc;
  --fav-active:   #f5a623;
  --shadow:       rgba(0,0,0,.08);
}

[data-theme="dark"] {
  --bg:           #181818;
  --bg-card:      #242424;
  --bg-input:     #2e2e2e;
  --text:         #e8e8e4;
  --text-muted:   #999;
  --text-link:    #999;
  --border:       #333;
  --heading:      #aaa;
  --accent:       #4a8ac4;
  --badge-person-bg:    #2e2e2e;
  --badge-person-text:  #ccc;
  --badge-person-hover: #3a3a3a;
  --badge-cat-bg:       #182540;
  --badge-cat-text:     #5590ff;
  --badge-cat-hover:    #1f2f50;
  /* per-category colors — dark */
  --cat1-bg: #0d1f44; --cat1-text: #6699ff; --cat1-hover: #142850;
  --cat2-bg: #d0d0d0; --cat2-text: #1a1a1a; --cat2-hover: #bababa;
  --cat3-bg: #342900; --cat3-text: #ffd966; --cat3-hover: #443500;
  --cat4-bg: #370a0a; --cat4-text: #ff7777; --cat4-hover: #471212;
  --cat5-bg: #321800; --cat5-text: #ff9944; --cat5-hover: #422200;
  --cat6-bg: #0d2e0d; --cat6-text: #66cc66; --cat6-hover: #143814;
  --cat7-bg: #380018; --cat7-text: #ff77aa; --cat7-hover: #480022;
  --cat9-bg: #280d3c; --cat9-text: #cc77ff; --cat9-hover: #340f50;
  --month-link:         #aaa;
  --month-active-bg:    #1e3a5c;
  --month-active-text:  #fff;
  --fav-inactive: #555;
  --fav-active:   #f5a623;
  --shadow:       rgba(0,0,0,.3);
}

/* Suppress all element transitions while the theme-switch overlay is active */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: none !important;
}

html {
}
@media (pointer: fine) {
  html { overscroll-behavior-y: none; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background .2s, color .2s;
  overflow-x: hidden;
}

::selection {
  background: rgba(245, 166, 35, .35);
  color: inherit;
}

/* ── Quote cards ─────────────────────────────────────────────────────────── */
.quote-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  transition: background .2s, border-color .2s;
}

.quote-text {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: .4rem;
}

.quote-meta {
  font-size: .8rem;
  color: var(--text-muted);
}

.quote-meta a {
  color: var(--text-link);
  text-decoration: none;
}

.quote-meta a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ── Date headings ───────────────────────────────────────────────────────── */
.date-heading {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--heading);
  text-transform: uppercase;
  padding-bottom: .4rem;
  padding-top: .3rem;
  margin-bottom: .75rem;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  transition: background .2s, box-shadow .15s;
}

.date-heading.is-stuck {
  box-shadow: 0 1px 0 var(--border);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge-person {
  display: inline-block;
  background: var(--badge-person-bg);
  color: var(--badge-person-text);
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
}

.badge-person:hover {
  background: var(--badge-person-hover);
  color: var(--badge-person-text);
}

.badge-person-self {
  cursor: default;
  opacity: .45;
}

.badge-cat {
  display: inline-block;
  background: var(--badge-cat-bg);
  color: var(--badge-cat-text);
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  opacity: .6;
}

a.badge-cat:hover {
  background: var(--badge-cat-hover);
  color: var(--badge-cat-text);
  opacity: 1;
}

.badge-cat-self {
  cursor: default;
}

/* ── Per-category badge colors ───────────────────────────────────────────── */
/* Double-class selector (0-2-0) beats .quote-meta a (0-1-1) so text color  */
/* renders correctly whether the badge is a link inside .quote-meta or not. */
.badge-cat.badge-cat-1 { background: var(--cat1-bg); color: var(--cat1-text); }
.badge-cat.badge-cat-2 { background: var(--cat2-bg); color: var(--cat2-text); }
.badge-cat.badge-cat-3 { background: var(--cat3-bg); color: var(--cat3-text); }
.badge-cat.badge-cat-4 { background: var(--cat4-bg); color: var(--cat4-text); }
.badge-cat.badge-cat-5 { background: var(--cat5-bg); color: var(--cat5-text); }
.badge-cat.badge-cat-6 { background: var(--cat6-bg); color: var(--cat6-text); }
.badge-cat.badge-cat-7 { background: var(--cat7-bg); color: var(--cat7-text); }
.badge-cat.badge-cat-9 { background: var(--cat9-bg); color: var(--cat9-text); }

a.badge-cat-1:hover { background: var(--cat1-hover); color: var(--cat1-text); }
a.badge-cat-2:hover { background: var(--cat2-hover); color: var(--cat2-text); }
a.badge-cat-3:hover { background: var(--cat3-hover); color: var(--cat3-text); }
a.badge-cat-4:hover { background: var(--cat4-hover); color: var(--cat4-text); }
a.badge-cat-5:hover { background: var(--cat5-hover); color: var(--cat5-text); }
a.badge-cat-6:hover { background: var(--cat6-hover); color: var(--cat6-text); }
a.badge-cat-7:hover { background: var(--cat7-hover); color: var(--cat7-text); }
a.badge-cat-9:hover { background: var(--cat9-hover); color: var(--cat9-text); }

.edit-link {
  font-size: .75rem;
  color: #bbb !important;
  text-decoration: none;
}

.edit-link:hover {
  color: #666 !important;
}

/* ── Person grid ─────────────────────────────────────────────────────────── */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem;
}

.person-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .6rem .9rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .2s;
}

.person-card:hover {
  border-color: var(--accent);
  color: var(--text);
}

.person-name {
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.person-count {
  font-size: .78rem;
  color: var(--text-muted);
}

.letter-heading {
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: .05em;
  scroll-margin-top: 8px;
}

.letter-btn { width: 2rem; padding-left: 0; padding-right: 0; text-align: center; }
.year-btn-wrap > a.btn,
.year-jump-btn { width: 3.5rem; padding-left: 0; padding-right: 0; }

/* ── Category cards ──────────────────────────────────────────────────────── */
.card-cat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  transition: transform .15s, box-shadow .15s, background .2s;
  color: var(--text);
}

.card-cat-1 { border-left-color: #3366ee; }  /* vivid blue   */
.card-cat-2 { border-left-color: #2e2e2e; }  /* dark charcoal */
.card-cat-3 { border-left-color: #e8d400; }  /* bright yellow */
.card-cat-4 { border-left-color: #cc2233; }  /* true red      */
.card-cat-5 { border-left-color: #dd6600; }  /* true orange   */
.card-cat-6 { border-left-color: #229933; }  /* true green    */
.card-cat-7 { border-left-color: #cc1166; }  /* vivid pink    */
.card-cat-9 { border-left-color: #8822cc; }  /* grape purple  */

.card-cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
  color: var(--text);
}

/* ── Checkbox grid ───────────────────────────────────────────────────────── */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .25rem .75rem;
  max-height: 400px;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
}

.default-star {
  color: var(--fav-active);
  font-size: .8em;
}

/* ── Import Day drag-to-reorder ──────────────────────────────────────────── */
.drag-handle {
  cursor: grab;
  color: #bbb;
  user-select: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
}

.drag-handle:active { cursor: grabbing; }

.import-card.dragging { opacity: .35; }

.import-card.drag-over {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
}

/* ── Anchor scroll offset ─────────────────────────────────────────────────── */
[id^="month-"], [id^="date-"] {
  scroll-margin-top: 8px;
}

[id^="quote-"] {
  scroll-margin-top: var(--quote-scroll-margin, 2rem);
}

/* ── Anchor flash: triggered by JS via .quote-flash class ────────────────── */
@keyframes quote-flash {
  0%, 25% { background-color: rgba(245,166,35,.12); box-shadow: 0 0 0 4px rgba(245,166,35,.5); }
  100%    { background-color: var(--bg-card); box-shadow: none; }
}

.quote-flash {
  animation: quote-flash 2s ease-out;
}

/* ── Homepage stat cards ─────────────────────────────────────────────────── */
a.stat-card { color: var(--text); }
a.stat-card:hover { color: var(--text); }

/* ── Form selects ────────────────────────────────────────────────────────── */
.form-select {
  background-color: var(--bg-card);
  border-color: var(--border);
  border-radius: 6px;
  color: var(--text);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e3a5c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  transition: border-color .15s, box-shadow .15s;
}

.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(30,58,92,.15);
  outline: none;
}

[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a8ac4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ── Random quote card clickable ─────────────────────────────────────────── */
#random-card {
  cursor: pointer;
}

/* ── Back to top button ──────────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 2px 8px var(--shadow);
  transition: color .15s;
}

#back-to-top.visible { display: flex; }
#back-to-top:hover   { color: var(--text); }

/* ── Year / month navigation ─────────────────────────────────────────────── */
.year-btn-wrap {
  position: relative;
  display: inline-block;
}

.month-strip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  margin-top: 0;
  box-shadow: 0 2px 8px var(--shadow);
  gap: 2px;
}

.year-btn-wrap:hover .month-strip {
  display: flex;
}

.month-link {
  font-size: .875rem;
  padding: 2px 7px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--month-link);
}

.month-link:hover,
.month-link.active {
  background: var(--month-active-bg);
  color: var(--month-active-text);
}

/* ── Favorite button ─────────────────────────────────────────────────────── */
.fav-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fav-inactive);
  font-size: 1rem;
  line-height: 1;
  transition: color .1s;
}

@media (hover: hover) {
  .fav-btn:hover { color: var(--fav-active); }
}
.fav-btn.active { color: var(--fav-active); }
.fav-btn { -webkit-tap-highlight-color: transparent; }
.fav-btn:focus, .fav-btn:focus-visible { outline: none; }

/* ── Dark mode toggle ────────────────────────────────────────────────────── */
.dark-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.dark-toggle:hover { color: #fff; }

/* ── Bootstrap overrides for dark mode ───────────────────────────────────── */
[data-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .card-cat-1 { border-left-color: var(--cat1-text); }
[data-theme="dark"] .card-cat-2 { border-left-color: var(--cat2-text); }
[data-theme="dark"] .card-cat-3 { border-left-color: var(--cat3-text); }
[data-theme="dark"] .card-cat-4 { border-left-color: var(--cat4-text); }
[data-theme="dark"] .card-cat-5 { border-left-color: var(--cat5-text); }
[data-theme="dark"] .card-cat-6 { border-left-color: var(--cat6-text); }
[data-theme="dark"] .card-cat-7 { border-left-color: var(--cat7-text); }
[data-theme="dark"] .card-cat-9 { border-left-color: var(--cat9-text); }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .form-control::placeholder { color: #666; }

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--bg-input);
  color: var(--text);
  border-color: #555;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.1);
}

[data-theme="dark"] .table {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--bg-card);
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-color: var(--text);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .card-header {
  background-color: rgba(255,255,255,.05);
  border-color: var(--border);
  color: var(--text);
}

.table-themed-head th {
  background: rgba(0,0,0,.04);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .table-themed-head th {
  background: #2a2a2a;
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .alert-danger {
  background: #3a1a1a;
  border-color: #5a2a2a;
  color: #f8a0a0;
}

.btn-outline-secondary.active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: #555;
  border-color: #999;
  border-width: 1.5px;
}


[data-theme="dark"] .btn-outline-secondary {
  color: #ccc;
  border-color: #777;
}

[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus {
  background: #1e3a5c !important;
  border-color: #1e3a5c !important;
  color: #fff !important;
}

[data-theme="dark"] .text-muted { color: #888 !important; }

/* ── Navbar tweaks ───────────────────────────────────────────────────────── */
.navbar-brand {
  font-weight: 700;
  letter-spacing: .02em;
}

/* Prevent nav items from wrapping in the expanded state — go straight to hamburger */
.navbar-collapse .navbar-nav {
  flex-wrap: nowrap;
}
.navbar-collapse .navbar-nav .nav-link {
  white-space: nowrap;
}

.navbar.bg-dark {
  background-color: #1e3a5c !important;
}

[data-theme="dark"] .navbar.bg-dark {
  background-color: #0d1e30 !important;
}

.btn-dark {
  --bs-btn-bg:           #1e3a5c;
  --bs-btn-border-color: #1e3a5c;
  --bs-btn-hover-bg:     #152e4d;
  --bs-btn-hover-border-color: #152e4d;
  --bs-btn-active-bg:    #152e4d;
  --bs-btn-active-border-color: #152e4d;
}

/* ── Month strip: touch-open state ──────────────────────────────────────── */
/* touch-open is only ever added by JS on touch devices, so display:block here
   is implicitly mobile-only — natural inline wrapping, no flex-wrap needed */
.month-strip.touch-open { display: block; }

/* ── Touch target enlargement ────────────────────────────────────────────── */
@media (pointer: coarse) {
  .fav-btn { padding: 8px; margin: -8px; }
  .edit-link { padding: 6px; margin: -6px; }
  .csel-chip-x { padding: 2px 5px; }

}

/* ── Stats: streak subtext ───────────────────────────────────────────────── */
.streak-subtext {
  font-size: .82rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .streak-subtext {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* ── Stats grid ──────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}