/* ============================================================
   DISTRICT4 PREMIUM DARK THEME v2.0
   Polished, modern dark social platform UI - Feb 2026
   Inspired by Linear, Vercel, GitHub Dark
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --d4-bg:            #080b12;
  --d4-surface:       #0f1219;
  --d4-surface-2:     #151923;
  --d4-surface-3:     #1c2130;
  --d4-border:        #1e2740;
  --d4-border-light:  #2b3660;
  --d4-primary:       #6366f1;
  --d4-primary-h:     #818cf8;
  --d4-primary-glow:  rgba(99,102,241,0.2);
  --d4-primary-dim:   rgba(99,102,241,0.12);
  --d4-success:       #10b981;
  --d4-danger:        #f87171;
  --d4-warning:       #fbbf24;
  --d4-text:          #dde3f0;
  --d4-text-strong:   #f0f4ff;
  --d4-muted:         #8898b8;
  --d4-dim:           #4a5580;
  --d4-link:          #a5b4fc;
  --d4-link-h:        #c7d2fe;
  --d4-upvote:        #22c55e;
  --d4-downvote:      #f87171;
  --d4-radius:        10px;
  --d4-radius-sm:     7px;
  --d4-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', system-ui, sans-serif;
  --d4-font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
  --d4-shadow:        0 1px 4px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  --d4-shadow-lg:     0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
  --d4-transition:    all 0.15s ease;
}

/* ── Base ── */
html, body {
  background-color: var(--d4-bg) !important;
  color: var(--d4-text) !important;
  font-family: var(--d4-font) !important;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lemmy-site { background-color: var(--d4-bg) !important; }

/* ── Frosted Glass Navbar ── */
nav.navbar {
  background-color: rgba(8,11,18,0.90) !important;
  border-bottom: 1px solid var(--d4-border) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 5px 0 !important;
}
/* Subtle gradient glow below navbar */
nav.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--d4-primary-dim), transparent);
}

.navbar-brand {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--d4-text-strong) !important;
  letter-spacing: -0.03em !important;
}

.nav-link, .navbar-nav .nav-link {
  color: var(--d4-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: var(--d4-transition) !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
}
.nav-link:hover { color: var(--d4-text) !important; background: rgba(255,255,255,0.03) !important; }
.nav-link.active { color: var(--d4-link) !important; }

/* ── Global bg overrides ── */
.bg-light, .bg-white { background-color: var(--d4-surface) !important; }
.bg-secondary { background-color: var(--d4-surface-2) !important; }
.bg-body, .bg-dark { background-color: var(--d4-bg) !important; }

/* ── Cards ── */
.card {
  background-color: var(--d4-surface) !important;
  border: 1px solid var(--d4-border) !important;
  border-radius: var(--d4-radius) !important;
  box-shadow: var(--d4-shadow) !important;
  color: var(--d4-text) !important;
  transition: border-color 0.15s !important;
}
.card:hover { border-color: var(--d4-border-light) !important; }
.card.border-secondary { border-color: var(--d4-border) !important; }
.card-header {
  background-color: var(--d4-surface-2) !important;
  border-bottom: 1px solid var(--d4-border) !important;
  color: var(--d4-text-strong) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.01em !important;
  padding: 10px 14px !important;
}

/* ── Post Listing ── */
.post-listing {
  background-color: var(--d4-surface) !important;
  border: 1px solid var(--d4-border) !important;
  border-radius: var(--d4-radius) !important;
  padding: 14px 16px 12px !important;
  margin-bottom: 8px !important;
  position: relative !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  overflow: hidden !important;
}
.post-listing:hover {
  border-color: var(--d4-border-light) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
}
/* Accent left bar on hover */
.post-listing::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.2s;
}
.post-listing:hover::before {
  background: linear-gradient(180deg, var(--d4-primary), #7c3aed);
}

/* Post title */
.post-title a, .post-title a:visited {
  color: var(--d4-text-strong) !important;
  font-weight: 600 !important;
  font-size: 0.96rem !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
}
.post-title a:hover { color: var(--d4-link-h) !important; }

/* Post thumbnail */
.thumbnail, .post-listing .thumbnail img { border-radius: 7px !important; }

/* ── Vote Bar ── */
.vote-bar { min-width: 26px !important; }
.upvote, .downvote, .vote-bar button {
  color: var(--d4-dim) !important;
  background: transparent !important;
  border: none !important;
  padding: 2px !important;
  transition: color 0.15s, transform 0.1s !important;
}
.upvote:hover { color: var(--d4-upvote) !important; transform: scale(1.2) !important; }
.downvote:hover { color: var(--d4-downvote) !important; transform: scale(1.2) !important; }
.score, .number-upvotes {
  color: var(--d4-muted) !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
}

/* ── Links ── */
a { color: var(--d4-link) !important; text-decoration: none !important; }
a:hover { color: var(--d4-link-h) !important; }
.text-muted { color: var(--d4-muted) !important; }
small, .small { color: var(--d4-dim) !important; font-size: 0.8rem !important; }
h1,h2,h3,h4,h5,h6 { color: var(--d4-text-strong) !important; letter-spacing: -0.02em !important; }

.community-link, .person-listing a, a.community-link {
  color: var(--d4-link) !important; font-weight: 500 !important;
}
.community-link:hover, .person-listing a:hover { color: var(--d4-link-h) !important; }

/* ── Primary Button ── */
.btn-primary {
  background: linear-gradient(135deg, var(--d4-primary) 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--d4-radius-sm) !important;
  padding: 0.4rem 1.1rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.35) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--d4-primary-h) 0%, #8b5cf6 100%) !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.5) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active { transform: none !important; box-shadow: 0 1px 6px rgba(99,102,241,0.3) !important; }

/* ── Secondary Button ── */
.btn-secondary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--d4-border-light) !important;
  color: var(--d4-muted) !important;
  border-radius: var(--d4-radius-sm) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: var(--d4-transition) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,0.07) !important; border-color: var(--d4-primary) !important; color: var(--d4-text) !important; }

/* ── Outline/Sort Buttons ── */
.btn-outline-secondary {
  color: var(--d4-muted) !important;
  border: 1px solid var(--d4-border-light) !important;
  background: transparent !important;
  border-radius: var(--d4-radius-sm) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  transition: var(--d4-transition) !important;
}
.btn-outline-secondary:hover { background: rgba(255,255,255,0.06) !important; color: var(--d4-text) !important; border-color: var(--d4-primary) !important; }
.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active {
  background: var(--d4-primary-dim) !important;
  color: var(--d4-link) !important;
  border-color: var(--d4-primary) !important;
  box-shadow: 0 0 0 1px var(--d4-primary-dim) inset, 0 0 8px var(--d4-primary-glow) !important;
}

/* ── Ghost button ── */
.btn-link { color: var(--d4-link) !important; text-decoration: none !important; font-weight: 500 !important; padding: 0 !important; }
.btn-link:hover { color: var(--d4-link-h) !important; }

/* ── Forms ── */
.form-control, .form-select, textarea {
  background-color: var(--d4-surface-2) !important;
  border: 1px solid var(--d4-border) !important;
  color: var(--d4-text) !important;
  border-radius: var(--d4-radius-sm) !important;
  font-size: 0.875rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-control:focus, .form-select:focus, textarea:focus {
  background-color: var(--d4-surface-2) !important;
  border-color: var(--d4-primary) !important;
  color: var(--d4-text) !important;
  box-shadow: 0 0 0 3px var(--d4-primary-glow) !important;
  outline: none !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--d4-dim) !important; }
select option { background: var(--d4-surface-2) !important; color: var(--d4-text) !important; }
.form-label { color: var(--d4-muted) !important; font-size: 0.85rem !important; font-weight: 500 !important; }
.form-check-input { background-color: var(--d4-surface-3) !important; border-color: var(--d4-border-light) !important; }
.form-check-input:checked { background-color: var(--d4-primary) !important; border-color: var(--d4-primary) !important; }

.input-group-text { background-color: var(--d4-surface-3) !important; border-color: var(--d4-border) !important; color: var(--d4-muted) !important; }

/* ── Badges ── */
.badge { font-weight: 600 !important; font-size: 0.68rem !important; padding: 0.28em 0.65em !important; border-radius: 5px !important; letter-spacing: 0.02em !important; }
.text-bg-light    { background: var(--d4-surface-3) !important; color: var(--d4-muted) !important; }
.text-bg-success  { background: rgba(16,185,129,0.12) !important; color: #34d399 !important; }
.text-bg-danger   { background: rgba(248,113,113,0.12) !important; color: #fca5a5 !important; }
.text-bg-primary  { background: var(--d4-primary-dim) !important; color: var(--d4-link) !important; }
.text-bg-warning  { background: rgba(251,191,36,0.12) !important; color: #fcd34d !important; }
.text-bg-secondary { background: var(--d4-surface-3) !important; color: var(--d4-muted) !important; }

/* ── Nav Tabs ── */
.nav-tabs { border-bottom: 1px solid var(--d4-border) !important; }
.nav-tabs .nav-link { color: var(--d4-muted) !important; border: none !important; border-bottom: 2px solid transparent !important; background: transparent !important; padding: 7px 13px !important; font-size: 0.875rem !important; font-weight: 500 !important; }
.nav-tabs .nav-link:hover { color: var(--d4-text) !important; }
.nav-tabs .nav-link.active { color: var(--d4-text-strong) !important; border-bottom-color: var(--d4-primary) !important; background: transparent !important; font-weight: 600 !important; }

/* ── Dropdowns ── */
.dropdown-menu { background-color: var(--d4-surface-2) !important; border: 1px solid var(--d4-border-light) !important; border-radius: var(--d4-radius) !important; box-shadow: var(--d4-shadow-lg) !important; padding: 5px !important; }
.dropdown-item { color: var(--d4-muted) !important; font-size: 0.875rem !important; border-radius: 6px !important; padding: 7px 12px !important; }
.dropdown-item:hover { background-color: rgba(255,255,255,0.06) !important; color: var(--d4-text) !important; }
.dropdown-item:active { background-color: var(--d4-primary) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--d4-border) !important; margin: 4px 0 !important; }

/* ── Comment Nodes ── */
.comment-node .card { background: var(--d4-surface) !important; border-color: var(--d4-border) !important; border-radius: 8px !important; }
.comment-node .card:hover { border-color: var(--d4-border-light) !important; }

/* ── Modals ── */
.modal-content { background-color: var(--d4-surface-2) !important; border: 1px solid var(--d4-border-light) !important; border-radius: var(--d4-radius) !important; color: var(--d4-text) !important; box-shadow: var(--d4-shadow-lg) !important; }
.modal-header { background: var(--d4-surface-3) !important; border-bottom: 1px solid var(--d4-border) !important; border-radius: var(--d4-radius) var(--d4-radius) 0 0 !important; }
.modal-footer { border-top: 1px solid var(--d4-border) !important; }
.modal-title { color: var(--d4-text-strong) !important; font-weight: 600 !important; }
.btn-close { filter: invert(1) !important; opacity: 0.5 !important; }
.btn-close:hover { opacity: 0.9 !important; }

/* ── Pagination ── */
.pagination { gap: 3px !important; }
.page-link { background-color: var(--d4-surface) !important; border: 1px solid var(--d4-border) !important; color: var(--d4-muted) !important; border-radius: var(--d4-radius-sm) !important; font-size: 0.875rem !important; transition: var(--d4-transition) !important; padding: 5px 10px !important; }
.page-link:hover { background: var(--d4-surface-2) !important; color: var(--d4-text) !important; border-color: var(--d4-primary) !important; }
.page-item.active .page-link { background: var(--d4-primary) !important; border-color: var(--d4-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(99,102,241,0.4) !important; }
.page-item.disabled .page-link { opacity: 0.3 !important; }

/* ── Alerts ── */
.alert { border-radius: var(--d4-radius-sm) !important; font-size: 0.875rem !important; border: 1px solid !important; }
.alert-warning { background: rgba(251,191,36,0.06) !important; color: #fcd34d !important; border-color: rgba(251,191,36,0.18) !important; }
.alert-danger   { background: rgba(248,113,113,0.06) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,0.18) !important; }
.alert-success  { background: rgba(16,185,129,0.06) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,0.18) !important; }
.alert-info     { background: rgba(34,211,238,0.06) !important; color: #67e8f9 !important; border-color: rgba(34,211,238,0.18) !important; }

/* ── Tables ── */
table { color: var(--d4-text) !important; }
thead th { border-bottom: 1px solid var(--d4-border) !important; color: var(--d4-muted) !important; font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.07em !important; font-weight: 600 !important; }
tbody tr { border-color: var(--d4-border) !important; }
tbody tr:hover { background-color: rgba(255,255,255,0.03) !important; }
/* Override Bootstrap table-striped on dark bg */
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent !important; background-color: var(--d4-surface) !important; color: var(--d4-text) !important; }
.table-striped > tbody > tr:nth-of-type(even) > * { background-color: rgba(255,255,255,0.015) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; box-shadow: none !important; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255,255,255,0.04) !important; color: var(--d4-text) !important; }

/* ── List group ── */
.list-group-item { background-color: var(--d4-surface) !important; border-color: var(--d4-border) !important; color: var(--d4-text) !important; }
.list-group-item:hover { background-color: var(--d4-surface-2) !important; }
.list-group-item.active { background-color: var(--d4-primary) !important; border-color: var(--d4-primary) !important; color: #fff !important; }

/* ── Misc ── */
hr { border-color: var(--d4-border) !important; opacity: 0.4 !important; }
.spinner-border { color: var(--d4-primary) !important; }

/* ── Footer ── */
footer { border-top: 1px solid var(--d4-border) !important; background: transparent !important; margin-top: 40px !important; padding: 16px 0 !important; }
footer, footer a { color: var(--d4-dim) !important; font-size: 0.78rem !important; }
footer a:hover { color: var(--d4-muted) !important; }

/* ── Code ── */
code, pre, kbd { background: var(--d4-surface-3) !important; border: 1px solid var(--d4-border) !important; border-radius: 4px !important; font-size: 0.82rem !important; font-family: var(--d4-font-mono) !important; color: #93c5fd !important; padding: 1px 5px !important; }
pre { padding: 12px !important; overflow-x: auto !important; }
pre code { background: transparent !important; border: none !important; color: inherit !important; padding: 0 !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--d4-bg); }
::-webkit-scrollbar-thumb { background: var(--d4-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--d4-dim); }

/* ── Markdown Editor ── */
.markdown-textarea-header { background: var(--d4-surface-3) !important; border: 1px solid var(--d4-border) !important; border-bottom: none !important; border-radius: var(--d4-radius-sm) var(--d4-radius-sm) 0 0 !important; padding: 4px 6px !important; }
.markdown-textarea-header .btn { color: var(--d4-dim) !important; border: none !important; padding: 3px 6px !important; border-radius: 4px !important; }
.markdown-textarea-header .btn:hover { color: var(--d4-text) !important; background: rgba(255,255,255,0.06) !important; }

/* ── Post action bar ── */
.post-metadata .btn, .post-metadata button { font-size: 0.77rem !important; color: var(--d4-dim) !important; transition: color 0.15s !important; }
.post-metadata .btn:hover, .post-metadata button:hover { color: var(--d4-muted) !important; }

/* ── Selection ── */
::selection { background: var(--d4-primary-glow) !important; color: var(--d4-link-h) !important; }

/* ── Ambient background gradient ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse 70% 40% at 15% 8%, rgba(99,102,241,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 85%, rgba(124,58,237,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}