:root {
  --background: hsl(240, 10%, 3.9%);
  --background-alt: hsl(240, 10%, 6%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --border: hsl(240, 3.7%, 15.9%);
  --accent: #6366f1;
  --accent-cyan: #22d3ee;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap');

/* ========================================
   GLOBAL RESET & DARK THEME
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  background: var(--background) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--foreground) !important;
}

p, span, div, a, li, label, input, textarea, button, select {
  font-family: var(--font-sans) !important;
}

/* ========================================
   LEFT SIDEBAR - DARK THEME
   ======================================== */

.left-sb-container.sidebar {
  background: var(--background) !important;
  border-right: 1px solid var(--border) !important;
}

.left-sb-container .sidebar__inner {
  background: var(--background) !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* User Info Section */
.left-sb-container .user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 16px;
  border-bottom: none;
  background: var(--background) !important;
}

.left-sb-container .user-info .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 12px;
  border: 3px solid var(--accent-cyan) !important;
  background: var(--accent-cyan) !important;
}

.left-sb-container .user-info .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left-sb-container .user-info .uname {
  text-align: center;
}

.left-sb-container .user-info .uname h5,
.left-sb-container .user-info .uname .name {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

.left-sb-container .user-info .uname a,
.left-sb-container .user-info .uname .username {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.left-sb-container .user-info .uname a:hover {
  opacity: 0.8 !important;
}

/* Account Stats */
.left-sb-container .account-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--background) !important;
}

.left-sb-container .account-stats .stat-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.left-sb-container .account-stats .stat-holder b,
.left-sb-container .account-stats .stat-holder .count {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.left-sb-container .account-stats .stat-holder span,
.left-sb-container .account-stats .stat-holder .label {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  text-transform: capitalize !important;
}

/* Sidebar Navigation */
.left-sb-container .sidebar-v-nav-wrapper {
  padding: 12px 16px;
  background: var(--background) !important;
}

.left-sb-container .sidebar-v-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--background) !important;
}

.left-sb-container .sidebar-v-nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  border-radius: 0;
  margin: 0;
  background: var(--background) !important;
  transition: background 0.2s ease;
}

.left-sb-container .sidebar-v-nav-item:hover {
  background: rgba(255,255,255,0.03) !important;
}

.left-sb-container .sidebar-v-nav-item .icon svg,
.left-sb-container .sidebar-v-nav-item .icon svg * {
  fill: var(--muted-foreground) !important;
}

.left-sb-container .sidebar-v-nav-item .nav-item-holder a {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.left-sb-container .sidebar-v-nav-item .nav-item-holder a:hover {
  color: var(--foreground) !important;
}

/* Active nav item */
.left-sb-container .sidebar-v-nav-item.active .icon svg,
.left-sb-container .sidebar-v-nav-item.active .icon svg * {
  fill: var(--accent-cyan) !important;
}

.left-sb-container .sidebar-v-nav-item.active .nav-item-holder a {
  color: var(--accent-cyan) !important;
  font-weight: 500 !important;
}

/* New Post Button */
.left-sb-container .publish-post-btn {
  padding: 16px;
  margin-top: auto;
  background: var(--background) !important;
}

.left-sb-container .publish-post-btn .btn {
  background: var(--foreground) !important;
  color: var(--background) !important;
  border: none !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 14px 24px !important;
  border-radius: 6px !important;
  transition: opacity 0.2s ease !important;
}

.left-sb-container .publish-post-btn .btn:hover {
  opacity: 0.9 !important;
}

/* ========================================
   MAIN CONTENT AREA - DARK THEME
   ======================================== */

.main-content-container,
.main-content-container-inner,
main,
.main-content,
.content-wrapper,
.page-content,
.feed-content,
.timeline-content {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

/* Page Header */
.page-header-holder,
.page-header,
.content-header {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}

.page-header-holder h1,
.page-header-holder h2,
.page-header-holder .page-title,
.page-header .title {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Logo in header */
.page-header-holder .logo img,
.page-header .logo img {
  filter: brightness(0) invert(1) !important;
}

/* Post Composer */
.post-compose-form-holder,
.compose-form,
.new-post-form,
.publish-box,
.create-post-container {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 16px !important;
}

.post-compose-form-holder textarea,
.compose-form textarea,
.new-post-form textarea {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  resize: none !important;
}

.post-compose-form-holder textarea:focus,
.compose-form textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

.post-compose-form-holder textarea::placeholder,
.compose-form textarea::placeholder {
  color: var(--muted-foreground) !important;
}

/* Compose actions */
.compose-actions,
.post-actions,
.compose-form-actions {
  background: var(--background) !important;
  border-top: none !important;
}

.compose-actions .btn,
.compose-form-actions .btn {
  color: var(--accent-cyan) !important;
  background: transparent !important;
}

.compose-actions .btn svg,
.compose-form-actions .btn svg {
  fill: var(--accent-cyan) !important;
}

/* Publish button */
.btn-publish,
.publish-btn,
button[type="submit"].btn-custom {
  background: var(--accent-cyan) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 10px 20px !important;
  transition: opacity 0.2s ease !important;
}

.btn-publish:hover,
.publish-btn:hover {
  opacity: 0.9 !important;
}

/* Empty State */
.empty-state,
.no-content,
.no-posts,
.empty-feed,
.timeline-empty {
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
  text-align: center;
  padding: 40px 20px;
}

.empty-state h3,
.empty-state .title,
.no-posts h3 {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.empty-state p,
.empty-state .description,
.no-posts p {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.empty-state svg,
.empty-state .icon,
.no-posts svg {
  fill: var(--accent-cyan) !important;
  opacity: 0.5;
}

/* Posts/Timeline */
.entry-li,
.timeline-entry,
.post-item,
.publication-item {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}

.entry-li:hover,
.timeline-entry:hover,
.post-item:hover {
  background: rgba(255,255,255,0.02) !important;
}

.entry-li .uname,
.entry-li .user-name,
.timeline-entry .user-name,
.post-item .user-name {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.entry-li .username,
.entry-li .user-username,
.timeline-entry .user-username,
.post-item .username {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
}

.entry-li .post-content,
.entry-li .post-text,
.timeline-entry .post-text,
.post-item .content {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.entry-li .time,
.timeline-entry .time,
.post-item .time {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* ========================================
   RIGHT SIDEBAR - DARK THEME
   ======================================== */

.right-sb-container.sidebar,
.right-sidebar,
aside.right {
  background: var(--background) !important;
  border-left: 1px solid var(--border) !important;
}

.right-sb-container .sidebar__inner,
.right-sidebar .sidebar__inner {
  background: var(--background) !important;
}

/* Search */
.search-form,
.search-container,
.search-wrapper {
  background: var(--background) !important;
  padding: 16px !important;
}

.search-form .form-control,
.search-form input,
.search-input {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 10px 16px 10px 40px !important;
  transition: border-color 0.2s ease !important;
}

.search-form .form-control:focus,
.search-form input:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-form .form-control::placeholder,
.search-form input::placeholder {
  color: var(--muted-foreground) !important;
}

.search-form svg,
.search-icon {
  fill: var(--muted-foreground) !important;
}

/* Widget Boxes */
.widget,
.sidebar-widget,
.sb-widget,
.trending-box,
.suggestions-box,
.hot-topics,
.who-to-follow {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin: 16px !important;
  overflow: hidden;
}

.widget-header,
.sidebar-widget-header,
.sb-widget-header,
.widget h3,
.widget h4 {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px !important;
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.widget-body,
.sidebar-widget-body,
.sb-widget-body {
  background: var(--background-alt) !important;
  padding: 0 !important;
}

/* Hot Topics / Trending */
.trending-item,
.hashtag-item,
.topic-item,
.hot-topic-item {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  transition: background 0.2s ease !important;
}

.trending-item:last-child,
.hashtag-item:last-child {
  border-bottom: none !important;
}

.trending-item:hover,
.hashtag-item:hover,
.topic-item:hover {
  background: rgba(255,255,255,0.03) !important;
}

.trending-item a,
.hashtag-item a,
.topic-item a {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.trending-item .count,
.hashtag-item .count {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* Who to Follow */
.follow-suggestion,
.user-suggestion,
.follow-item,
.who-to-follow-item {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s ease !important;
}

.follow-suggestion:last-child,
.follow-item:last-child {
  border-bottom: none !important;
}

.follow-suggestion:hover,
.follow-item:hover {
  background: rgba(255,255,255,0.03) !important;
}

.follow-suggestion .avatar,
.follow-item .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent-cyan) !important;
  background: var(--accent-cyan) !important;
}

.follow-suggestion .name,
.follow-item .name {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.follow-suggestion .username,
.follow-item .username {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
}

.follow-suggestion .btn-follow,
.follow-item .btn-follow,
.btn-follow {
  background: var(--accent-cyan) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 20px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 16px !important;
  transition: opacity 0.2s ease !important;
}

.btn-follow:hover {
  opacity: 0.9 !important;
}

/* Show More Link */
.show-more,
.load-more,
.see-more {
  padding: 12px 16px !important;
  background: var(--background-alt) !important;
}

.show-more a,
.load-more a,
.see-more a {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.show-more a:hover,
.load-more a:hover {
  opacity: 0.8 !important;
}

/* Footer */
.sidebar-footer,
.main-footer,
.right-sb-footer,
footer {
  background: var(--background) !important;
  border-top: 1px solid var(--border) !important;
  padding: 16px !important;
}

.sidebar-footer a,
.main-footer a,
footer a {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.sidebar-footer a:hover,
.main-footer a:hover,
footer a:hover {
  color: var(--foreground) !important;
}

.sidebar-footer .copyright,
footer .copyright {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}

/* ========================================
   MODALS - DARK THEME
   ======================================== */

.modal-content {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.modal-header {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

.modal-header .modal-title {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
}

.modal-header .close,
.modal-header .dismiss-modal svg {
  color: var(--muted-foreground) !important;
  fill: var(--muted-foreground) !important;
}

.modal-body {
  background: var(--background) !important;
  color: var(--foreground) !important;
}

.modal-body .form-group label {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.modal-body .form-control {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  transition: border-color 0.2s ease !important;
}

.modal-body .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

.modal-footer {
  background: var(--background) !important;
  border-top: 1px solid var(--border) !important;
}

/* ========================================
   BUTTONS - UNIFIED STYLING
   ======================================== */

.btn-custom.main-inline,
.btn.btn-custom.main-inline {
  background: var(--foreground) !important;
  border: none !important;
  color: var(--background) !important;
  border-radius: 6px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 24px !important;
  transition: opacity 0.2s ease !important;
  box-shadow: none !important;
}

.btn-custom.main-inline:hover {
  opacity: 0.9 !important;
}

.btn-custom.main-outline {
  background: transparent !important;
  border: 1px solid var(--foreground) !important;
  color: var(--foreground) !important;
  border-radius: 6px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}

.btn-custom.main-outline:hover {
  background: var(--foreground) !important;
  color: var(--background) !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  transition: border-color 0.2s ease !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground) !important;
}

label {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ========================================
   DROPDOWNS
   ======================================== */

.dropdown-menu {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  padding: 8px 0 !important;
}

.dropdown-item {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
}

.dropdown-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--foreground) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
}

/* ========================================
   CARDS & BOXES
   ======================================== */

.card,
.box,
.panel {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.card-header,
.box-header,
.panel-header {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
}

.card-body,
.box-body,
.panel-body {
  background: var(--background-alt) !important;
  color: var(--foreground) !important;
}

/* ========================================
   NOTIFICATIONS
   ======================================== */

.notification-item,
.notif-item {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  transition: background 0.2s ease !important;
}

.notification-item:hover {
  background: rgba(255,255,255,0.02) !important;
}

.notification-item .text {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
}

.notification-item .time {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* ========================================
   SCROLLBARS
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(240, 5%, 25%);
}

/* ========================================
   SELECTION
   ======================================== */

::selection {
  background: var(--accent);
  color: var(--foreground);
}

/* ========================================
   LINKS
   ======================================== */

a {
  color: var(--accent-cyan);
  transition: opacity 0.2s ease;
}

a:hover {
  color: var(--accent-cyan);
  opacity: 0.8;
  text-decoration: none;
}

/* ========================================
   GUEST SIDEBAR
   ======================================== */

.left-sb-container .guest-welcome {
  background: var(--background) !important;
  padding: 24px 16px !important;
}

.left-sb-container .guest-welcome .logo img {
  filter: brightness(0) invert(1);
}

.left-sb-container .guest-welcome .welcome-title {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
}

.left-sb-container .login-form {
  background: var(--background) !important;
}

.left-sb-container .login-or-signup {
  background: var(--background) !important;
}

.left-sb-container .login-or-signup small {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.left-sb-container .oauth-login-providers {
  background: var(--background) !important;
}

.left-sb-container .oauth-login-providers .social-login-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
}

.left-sb-container .oauth-login-providers .social-login-btn:hover {
  border-color: var(--foreground) !important;
}

.left-sb-container .oauth-login-providers .social-login-btn svg {
  fill: var(--foreground) !important;
}

.left-sb-container .tos-agreement {
  background: var(--background) !important;
}

.left-sb-container .tos-agreement span,
.left-sb-container .tos-agreement a {
  color: var(--muted-foreground) !important;
  font-size: 12px !important;
}

.left-sb-container .tos-agreement a:hover {
  color: var(--foreground) !important;
}

/* ========================================
   ADDITIONAL OVERRIDES
   ======================================== */

.bg-white,
.bg-light,
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background: white"],
[style*="background: #fff"] {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

.text-dark,
.text-black {
  color: var(--foreground) !important;
}

.border-light {
  border-color: var(--border) !important;
}

/* Preloader */
.main-preloader-holder {
  background: var(--background) !important;
}

/* Alert/Messages */
.alert {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: 8px !important;
}

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: var(--background) !important;
}

.nav-tabs .nav-link {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  border: none !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--foreground) !important;
  border: none !important;
}

.nav-tabs .nav-link.active {
  color: var(--accent-cyan) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--accent-cyan) !important;
}

/* Tables */
table,
.table {
  background: var(--background) !important;
  color: var(--foreground) !important;
}

.table th,
.table td {
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

.table thead th {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-heading) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.02) !important;
}

/* Badges */
.badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.badge-primary {
  background: var(--accent) !important;
}

/* Tooltips */
.tooltip-inner {
  background: var(--muted) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
}

/* ========================================
   RIGHT SIDEBAR WIDGETS - FORCE DARK
   ======================================== */

.right-sb-container .list-group,
.topical-posts-container .list-group,
.follow-suggestion-container .list-group {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 16px !important;
}

.right-sb-container .list-group-item,
.topical-posts-container .list-group-item,
.follow-suggestion-container .list-group-item {
  background: var(--background-alt) !important;
  background-color: var(--background-alt) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  padding: 12px 16px !important;
}

.right-sb-container .list-group-item:last-child,
.topical-posts-container .list-group-item:last-child,
.follow-suggestion-container .list-group-item:last-child {
  border-bottom: none !important;
}

.right-sb-container .list-group-item.main,
.topical-posts-container .list-group-item.main,
.follow-suggestion-container .list-group-item.main {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px !important;
}

.right-sb-container .list-group-item.main h4,
.topical-posts-container .list-group-item.main h4,
.follow-suggestion-container .list-group-item.main h4 {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.right-sb-container .list-group-item a,
.topical-posts-container .list-group-item a {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  text-decoration: none !important;
}

.right-sb-container .list-group-item span,
.topical-posts-container .list-group-item span {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

.right-sb-container .list-group-item.items-placeholder,
.topical-posts-container .list-group-item.items-placeholder,
.follow-suggestion-container .list-group-item.items-placeholder {
  text-align: center;
  padding: 24px 16px !important;
}

.right-sb-container .list-group-item.items-placeholder svg,
.topical-posts-container .list-group-item.items-placeholder svg {
  fill: var(--accent-cyan) !important;
  stroke: var(--accent-cyan) !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 12px !important;
  opacity: 0.6;
}

.right-sb-container .list-group-item.items-placeholder h5,
.topical-posts-container .list-group-item.items-placeholder h5,
.follow-suggestion-container .list-group-item.items-placeholder h5 {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.right-sb-container .list-group-item.show-more,
.topical-posts-container .list-group-item.show-more,
.follow-suggestion-container .list-group-item.show-more {
  background: var(--background-alt) !important;
}

.right-sb-container .list-group-item.show-more a {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
}

/* Follow suggestion user info */
.follow-suggestion-container .flex-cr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.follow-suggestion-container .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--accent-cyan) !important;
  background: var(--accent-cyan) !important;
}

.follow-suggestion-container .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.follow-suggestion-container .user-info-holder {
  flex: 1;
  min-width: 0;
}

.follow-suggestion-container .user-info-holder h4 {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 2px 0 !important;
}

.follow-suggestion-container .user-info-holder a {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.follow-suggestion-container .btn-custom.main-outline {
  background: var(--accent-cyan) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 20px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 6px 14px !important;
}

.follow-suggestion-container .btn-custom.main-outline:hover {
  opacity: 0.9 !important;
}

/* Search container */
.main-search-bar-container {
  padding: 16px !important;
  background: var(--background) !important;
}

.main-search-bar-container .input-holder {
  position: relative;
}

.main-search-bar-container .form-control {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  padding: 10px 16px 10px 40px !important;
}

.main-search-bar-container .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

.main-search-bar-container .form-control::placeholder {
  color: var(--muted-foreground) !important;
}

.main-search-bar-container a svg,
.main-search-bar-container .search-icon svg {
  fill: var(--muted-foreground) !important;
}

.search-result-holder {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
}

.search-result-holder .search-result-body {
  background: var(--background) !important;
}

.search-result-holder .search-result-footer {
  background: var(--background-alt) !important;
  border-top: 1px solid var(--border) !important;
}

.search-result-holder .search-result-footer a {
  color: var(--accent-cyan) !important;
}

/* ========================================
   PROFILE SETTINGS PAGE - DARK THEME
   ======================================== */

.main--profile-settings-container,
.profile-settings-nav {
  background: var(--background) !important;
}

.main--profile-settings-container .nav-list-itemset-title {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 15px !important;
}

.main--profile-settings-container .nav-list-itemset-title h4 {
  color: var(--accent-cyan) !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.main--profile-settings-container .nav-list-item {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 15px !important;
  transition: background 0.2s ease !important;
}

.main--profile-settings-container .nav-list-item:hover {
  background: rgba(255,255,255,0.02) !important;
}

.main--profile-settings-container .nav-list-item .preview-label {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.main--profile-settings-container .nav-list-item .preview-value {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
}

.main--profile-settings-container .nav-list-item .preview-value small {
  color: var(--muted-foreground) !important;
}

.main--profile-settings-container .nav-list-item svg {
  stroke: var(--muted-foreground) !important;
}

.main--profile-settings-container .nav-list-item:hover svg {
  stroke: var(--accent-cyan) !important;
}

/* ========================================
   TIMELINE CONTAINER & HEADER - DARK THEME
   ======================================== */

.timeline-container {
  background: var(--background) !important;
}

.timeline-header {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

.timeline-header .lp,
.timeline-header .cp,
.timeline-header .rp {
  background: var(--background) !important;
}

.timeline-header a,
.timeline-header .nav-link-holder a {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
}

.timeline-header .go-back svg {
  fill: var(--foreground) !important;
}

.timeline-header img {
  filter: brightness(0) invert(1) !important;
}

/* ========================================
   POST COMPOSER - DARK THEME
   ======================================== */

.publish-post-container,
.post-compose-box,
.compose-section,
.pub-post-form-holder {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

.publish-post-container .pub-post-form,
.pub-post-form-holder .pub-post-form {
  background: var(--background) !important;
}

.publish-post-container .avatar,
.pub-post-form-holder .avatar {
  border: 2px solid var(--accent-cyan) !important;
  background: var(--accent-cyan) !important;
}

.publish-post-container textarea,
.pub-post-form-holder textarea,
.pub-post-form textarea {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  padding: 12px !important;
}

.publish-post-container textarea:focus,
.pub-post-form-holder textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

.publish-post-container textarea::placeholder,
.pub-post-form-holder textarea::placeholder {
  color: var(--muted-foreground) !important;
}

.publish-post-container .actions-bar,
.pub-post-form-holder .actions-bar,
.pub-post-form .actions-bar {
  background: var(--background) !important;
  border-top: none !important;
}

.publish-post-container .actions-bar .lp button,
.pub-post-form-holder .actions-bar .lp button,
.pub-post-form .actions-bar button {
  background: transparent !important;
  border: none !important;
  color: var(--accent-cyan) !important;
}

.publish-post-container .actions-bar .lp button svg,
.pub-post-form-holder .actions-bar .lp button svg,
.pub-post-form .actions-bar button svg {
  fill: var(--accent-cyan) !important;
}

.publish-post-container .actions-bar .rp .btn,
.pub-post-form-holder .actions-bar .rp .btn,
.pub-post-form .actions-bar .btn-publish {
  background: var(--accent-cyan) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ========================================
   TIMELINE ENTRIES - DARK THEME
   ======================================== */

.timeline-body {
  background: var(--background) !important;
}

.timeline-body .empty-state-container,
.timeline-body .no-content-container {
  background: var(--background) !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

.timeline-body .empty-state-container svg,
.timeline-body .no-content-container svg {
  fill: var(--accent-cyan) !important;
  opacity: 0.5 !important;
}

.timeline-body .empty-state-container h3,
.timeline-body .no-content-container h3 {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  margin: 16px 0 8px !important;
}

.timeline-body .empty-state-container p,
.timeline-body .no-content-container p {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ========================================
   ADDITIONAL OVERRIDES FOR WHITE ELEMENTS
   ======================================== */

[style*="background: #f5f8fa"],
[style*="background:#f5f8fa"],
[style*="background-color: #f5f8fa"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background: white"],
[style*="background-color: white"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"] {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

[style*="color: #14171a"],
[style*="color:#14171a"],
[style*="color: #657786"],
[style*="color:#657786"] {
  color: var(--foreground) !important;
}

[style*="border-color: #e6ecf0"],
[style*="border-color:#e6ecf0"],
[style*="border: 1px solid #e6ecf0"] {
  border-color: var(--border) !important;
}

/* Timeline and feed specific */
.feed-container,
.main-feed,
.home-feed {
  background: var(--background) !important;
}

/* Make sure all inner containers are dark */
.main-content-container-inner > *,
.timeline-container > * {
  background-color: var(--background) !important;
}

/* Override any remaining Bootstrap white backgrounds */
.list-group-item {
  background: var(--background-alt) !important;
  background-color: var(--background-alt) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

/* Footer in right sidebar */
.right-sb-container .sidebar-footer,
.right-sb-container footer {
  background: var(--background) !important;
  border-top: 1px solid var(--border) !important;
  padding: 16px !important;
}

.right-sb-container .sidebar-footer a,
.right-sb-container footer a {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}

.right-sb-container .sidebar-footer .copyright,
.right-sb-container footer .copyright {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}

/* Announcement holder */
.announcement-holder {
  background: var(--background) !important;
}

/* ========================================
   AGGRESSIVE OVERRIDES - HIGH SPECIFICITY
   These match the original CSS specificity
   ======================================== */

/* Main container backgrounds */
main.main-content-container {
  background: var(--background) !important;
}

main.main-content-container div.main-content-container-inner {
  background: var(--background) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container {
  background: var(--background) !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
}

/* Timeline header */
main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-header {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-header div.lp div.nav-link-holder a {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-header div.rp div.nav-link-holder span.go-back {
  color: var(--foreground) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-header div.rp div.nav-link-holder span.go-back svg {
  fill: var(--accent-cyan) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-header div.rp div.nav-link-holder a svg {
  fill: var(--accent-cyan) !important;
}

/* Timeline posts container */
main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container {
  background: var(--background) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls {
  background: var(--background) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item:hover {
  background: rgba(255,255,255,0.02) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item-content div.publication-data div.publication-data-inner div.publisher-info div.lp a b {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item-content div.publication-data div.publication-data-inner div.publisher-info div.lp a span {
  color: var(--muted-foreground) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item-content div.publication-data div.publication-data-inner div.publisher-info div.rp span.posted-time time {
  color: var(--muted-foreground) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item-content div.publication-data div.publication-data-inner div.publisher-info div.rp span.posted-time svg {
  fill: var(--muted-foreground) !important;
}

/* Profile settings specific overrides */
main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container {
  background: var(--background) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav {
  background: var(--background) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-itemset-title {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-itemset-title h4 {
  color: var(--accent-cyan) !important;
  font-family: var(--font-heading) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item:hover,
main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item:active,
main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item:focus {
  background: rgba(255,255,255,0.03) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item div.lp span.preview-label {
  color: var(--muted-foreground) !important;
  font-family: var(--font-mono) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item div.lp span.preview-value {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
}

main.main-content-container div.main-content-container-inner div.timeline-container div.main--profile-settings-container div.profile-settings-nav div.nav-list-item div.rp svg {
  stroke: var(--muted-foreground) !important;
  fill: none !important;
}

/* Right sidebar specific overrides */
div.right-sb-container.sidebar {
  background: var(--background) !important;
  border-left: 1px solid var(--border) !important;
}

div.right-sb-container.sidebar div.sidebar__inner {
  background: var(--background) !important;
}

div.right-sb-container.sidebar div.main-search-bar-container {
  background: var(--background) !important;
}

div.right-sb-container.sidebar div.main-search-bar-container input.form-control {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
}

div.right-sb-container.sidebar div.topical-posts-container {
  background: var(--background) !important;
}

div.right-sb-container.sidebar div.topical-posts-container ul.list-group {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

div.right-sb-container.sidebar div.topical-posts-container ul.list-group li.list-group-item {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

div.right-sb-container.sidebar div.topical-posts-container ul.list-group li.list-group-item.main h4 {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
}

div.right-sb-container.sidebar div.topical-posts-container ul.list-group li.list-group-item.items-placeholder {
  background: var(--background-alt) !important;
}

div.right-sb-container.sidebar div.topical-posts-container ul.list-group li.list-group-item.items-placeholder h5 {
  color: var(--accent-cyan) !important;
  font-family: var(--font-sans) !important;
}

div.right-sb-container.sidebar div.follow-suggestion-container {
  background: var(--background) !important;
}

div.right-sb-container.sidebar div.follow-suggestion-container ul.list-group {
  background: var(--background-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

div.right-sb-container.sidebar div.follow-suggestion-container ul.list-group li.list-group-item {
  background: var(--background-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

div.right-sb-container.sidebar div.follow-suggestion-container ul.list-group li.list-group-item.main h4 {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
}

div.right-sb-container.sidebar div.follow-suggestion-container ul.list-group li.list-group-item div.user-info-holder h4 {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
}

div.right-sb-container.sidebar div.follow-suggestion-container ul.list-group li.list-group-item div.user-info-holder a {
  color: var(--muted-foreground) !important;
}

/* Left sidebar specific overrides */
div.left-sb-container.sidebar {
  background: var(--background) !important;
  border-right: 1px solid var(--border) !important;
}

div.left-sb-container.sidebar div.sidebar__inner {
  background: var(--background) !important;
}

/* Publish post container overrides */
div.publish-post-container {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}

div.publish-post-container div.pub-post-form {
  background: var(--background) !important;
}

div.publish-post-container div.pub-post-form textarea {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
}

div.publish-post-container div.pub-post-form div.actions-bar {
  background: var(--background) !important;
}

div.publish-post-container div.pub-post-form div.actions-bar div.lp button svg {
  fill: var(--accent-cyan) !important;
}

div.publish-post-container div.pub-post-form div.actions-bar div.rp button.btn-custom {
  background: var(--accent-cyan) !important;
  color: var(--background) !important;
}

/* Empty state container */
div.empty-state-container {
  background: var(--background) !important;
}

div.empty-state-container svg {
  fill: var(--accent-cyan) !important;
}

div.empty-state-container h3 {
  color: var(--foreground) !important;
  font-family: var(--font-heading) !important;
}

div.empty-state-container p {
  color: var(--muted-foreground) !important;
  font-family: var(--font-sans) !important;
}

/* Footer overrides */
div.sb-main-footer {
  background: var(--background) !important;
}

div.sb-main-footer a {
  color: var(--muted-foreground) !important;
}

div.sb-main-footer span {
  color: var(--muted-foreground) !important;
}