/* ── Clean Light Theme ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Links ── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
a.no-link-style, a.no-link-style:hover { color: inherit; text-decoration: none; }

/* ── Header ── */
header { background: var(--accent) !important; padding: 6px 0 !important; }
header .btn-link { color: #fff !important; opacity: 0.9; }
header .btn-link:hover { opacity: 1; color: #fff !important; }

/* ── Ward Selector ── */
.ward-selector-horizontal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important; padding: 4px 8px !important;
  margin-bottom: 14px !important;
}
.ward-selector-horizontal .btn-link {
  color: var(--muted) !important; font-size: 12px !important;
  padding: 4px 8px !important; border-radius: 6px !important; text-decoration: none;
}
.ward-selector-horizontal .btn-link:hover, .ward-selector-horizontal .btn-link.active {
  color: var(--fg) !important; background: var(--bg) !important;
}

/* ── Admin Hover Controls ── */
.admin-hover { opacity: 0; transition: opacity .15s; }
:hover > .admin-hover { opacity: 1; }

/* ── Sentiment Strip ── */
.senti-strip {
  display: flex; height: 3px; gap: 1px; margin-bottom: 6px;
  border-radius: 2px; overflow: hidden; cursor: help; opacity: .7;
  transition: height .15s, opacity .15s;
}
.senti-strip:hover { height: 6px; opacity: 1; }
.senti-seg { display: block; height: 100%; border-radius: 1px; transition: width .3s; }
.senti-label {
  font-size: 10px; color: var(--muted); margin-bottom: 2px; display: none;
}
@media (hover: none) {
  .senti-strip { height: 5px; opacity: .9; }
  .senti-label { display: block; }
}

/* ── Post Cards ── */
article.post-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important; padding: 12px !important;
  margin-bottom: 10px !important;
  transition: border-color .12s ease;
}
article.post-card:hover { border-color: var(--accent) !important; }
.post-title, .post-title a {
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--fg) !important; line-height: 1.3 !important;
}
.post-title a:hover { color: var(--accent) !important; }
.post-body { color: var(--fg) !important; font-size: 13px !important; line-height: 1.5 !important; }

/* ── Vote Column ── */
.vote-col {
  padding: 0 10px 0 0 !important; min-width: 38px;
  flex-shrink: 0;
  justify-content: flex-start !important; /* top-aligned, not centered */
  align-items: center !important;
  padding-top: 2px !important;
}
.vote-col .vote-btn {
  font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important;
  padding: 3px 6px !important; color: var(--muted) !important;
  background: transparent !important; border: none !important;
  border-radius: 4px !important; cursor: pointer;
  transition: color .1s, background .1s;
}
.vote-col .vote-btn:hover { color: var(--accent) !important; background: var(--accent-bg) !important; }
.vote-col .vote-btn.active-vote, .vote-col .vote-btn.voted { color: var(--accent) !important; font-weight: 700; }
.vote-count {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--fg) !important; text-align: center;
  min-width: 20px; padding: 2px 0; user-select: none;
}

/* ── Action Buttons (boost, super, burn) ── */
.vote-bar .vote-btn, .post-actions-row .vote-btn {
  font-size: 12px !important; font-weight: 500; padding: 3px 8px !important;
}

/* ── Buttons ── */
.btn { font-size: 12px !important; font-weight: 500; padding: 5px 12px !important; border-radius: 6px !important; }
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-outline-secondary {
  color: var(--muted) !important; border-color: var(--border) !important; background: transparent !important;
}
.btn-outline-secondary:hover { color: var(--fg) !important; background: var(--bg) !important; border-color: var(--accent) !important; }
.btn-sm { font-size: 11px !important; padding: 3px 8px !important; }
.btn-link { color: var(--accent); }

/* ── Forms ── */
.form-control, .form-select {
  font-size: 13px !important; padding: 6px 10px !important;
  background: var(--bg) !important; color: var(--fg) !important;
  border: 1px solid var(--border) !important; border-radius: 6px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-bg) !important; outline: none;
}
.form-control::placeholder { color: var(--muted); }
.form-label { font-size: 11px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.form-text { font-size: 11px; color: var(--muted); }

/* ── Cards ── */
.card, .list-group-item { background: var(--surface) !important; border-color: var(--border) !important; border-radius: 8px !important; }
.card-dark, .list-group-item { background: var(--surface) !important; color: var(--fg) !important; }

/* ── Post Author & Meta (compact) ── */
.post-footer {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end;
}
.post-footer .post-actions-wrapper { margin: 0; }
.post-footer .post-actions-wrapper .btn {
  font-size: 11px !important; padding: 2px 7px !important;
}
.post-author { gap: 6px; font-size: 11px; display: flex; align-items: center; }
.post-author img { flex-shrink: 0; border-radius: 50%; width: 22px; height: 22px; }
.post-author .text-muted { font-size: 11px; }
.post-actions-wrapper { margin-top: 6px; }
.timestamp { font-size: 11px; gap: 4px; color: var(--muted); }

/* ── Comments ── */
.comment-item {
  margin-bottom: 6px; padding: 8px 0;
}
.comment-item + .comment-item { border-top: 1px solid var(--border); }
.comment-replies { margin-left: 0; }
.comment-content { font-size: 13px; line-height: 1.5; color: var(--fg); }
.comment-content p { margin-bottom: 4px; }
.comment-actions .vote-btn { font-size: 11px !important; font-weight: 500; padding: 2px 5px !important; }
.reply-form { margin-top: 6px; }
.reply-form textarea {
  font-size: 12px; padding: 5px 8px; border-radius: 6px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
}

/* ── Sidebar ── */
.section-title {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 6px !important; margin-bottom: 10px !important;
}

/* ── Trending ── */
.trending-item {
  border-radius: 6px !important; padding: 6px 8px !important;
  margin-bottom: 2px; font-size: 12px; transition: border-color .1s;
}
.trending-item:hover { border-color: var(--accent) !important; }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border) !important;
  padding: 12px 0 !important; margin-top: 20px !important; font-size: 12px;
}

/* ── Breadcrumb ── */
.breadcrumb { font-size: 12px; }
.breadcrumb-item a { color: var(--muted); }
.breadcrumb-item.active { color: var(--fg); }

/* ── Mobile ── */
@media (max-width: 767px) {
  .no-mobile-padding { padding-left: 2px !important; padding-right: 2px !important; }
  article.post-card { padding: 10px !important; margin-bottom: 8px !important; }
  .vote-col { padding: 0 6px 0 0 !important; min-width: 32px; }
  .vote-col .vote-btn { font-size: 18px !important; padding: 2px 4px !important; }
}

/* ── Alerts ── */
.alert { border-radius: 6px; font-size: 13px; padding: 8px 12px; background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.alert-danger { border-color: #ef4444; color: #dc2626; background: #fef2f2; }
.alert-success { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
.alert-warning { border-color: #f59e0b; color: #d97706; background: #fffbeb; }

/* ── Badges ── */
.badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }

/* ── Utility ── */
.text-muted { color: var(--muted) !important; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; }
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .me-3 { margin-right: 16px; }
.ms-auto { margin-left: auto; } .ml-10 { margin-left: 2.5rem; }
.p-0 { padding: 0; } .px-2 { padding-left: 8px; padding-right: 8px; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; } .fw-semibold { font-weight: 600; }
.flex-grow-1 { flex-grow: 1; }
.d-flex { display: flex; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.rounded-circle { border-radius: 50%; }
.position-relative { position: relative; }
/* Featured post */
article.post-card.featured { border-left: 3px solid var(--accent); }