/* =====================================================
   ☀️ Vaani Light Theme Overrides
   Applied only when [data-theme="light"] is active
   ===================================================== */
/* 🌞 Vaani Premium Light Theme */

/* Softer Background Base */
[data-theme="light"] body.bg {
  background: linear-gradient(180deg, #f5f5f5 0%, #ececec 100%) !important;
  color: #1e293b !important;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Navbar / Header */
[data-theme="light"] .site-header {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Sidebar */
[data-theme="light"] .sidebar {
  background: #f7f7f8 !important;
  border-right: 1px solid #e2e8f0 !important;
}


[data-theme="light"] .sidebar i {
  color: #475569 !important;
  transition: color 0.2s ease;
}

[data-theme="light"] .sidebar i:hover {
  color: #2563eb !important;
}

/* Main Feed */
[data-theme="light"] .main-content {
  background: transparent !important;
  color: #1e293b !important;
}

/* Post cards */
[data-theme="light"] .post-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  color: #1f2937 !important;
  transition: box-shadow 0.2s ease;
}

[data-theme="light"] .post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ==============================
   🧭 Feed Tabs (Light theme)
   ============================== */
[data-theme="light"] .feed-tabs .tab {
  background: #f2f2f2 !important;
  color: #222 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease-in-out !important;
}

[data-theme="light"] .feed-tabs .tab:hover {
  background: #eaeaea !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .feed-tabs .tab.active {
  background: #fff5eb !important; /* soft orange tint */
  color: #111 !important;
  border-color: rgba(255, 170, 60, 0.6) !important;
  box-shadow:
    0 0 0 1px rgba(255, 180, 70, 0.55),
    0 0 10px rgba(255, 153, 0, 0.6),
    0 0 18px rgba(255, 136, 0, 0.35) !important; /* orange glow */
  transform: translateY(-1px);
}

/* optional: spacing container */
[data-theme="light"] .feed-tabs { gap: 8px; }


/* Buttons */
[data-theme="light"] .btn-primary {
  background: linear-gradient(90deg, #ff9933, #138808) !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

[data-theme="light"] .btn-primary:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* 🚫 Don't style the quote button like a gray secondary button */
[data-theme="light"] .btn-secondary:not(.open-quote),
[data-theme="light"] .btn-dark {
  background: #f8fafc !important;
  border: 1px solid #d1d5db !important;
  color: #1e293b !important;
}

/* Trending + News */
[data-theme="light"] .feed-right {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

[data-theme="light"] .feed-right h3 {
  color: #ef4444 !important;
}

/* Texts and Links */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] a {
  color: #1f2937 !important;
}

[data-theme="light"] a:hover {
  color: #2563eb !important;
}

/* Search box */
[data-theme="light"] .search-wrapper input {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

/* Toggle */
[data-theme="light"] .toggle-ball {
  background: #333 !important;
}

[data-theme="light"] .theme-toggle-label {
  background: #e2e8f0 !important;
}

/* Verified badge + Premium tag */
[data-theme="light"] .verified-icon {
  color: #2563eb !important;
}

[data-theme="light"] .badge {
  background: linear-gradient(90deg, #a855f7, #6366f1) !important;
  color: white !important;
}

/* ===========================================================
   🧱 OVERRIDE DARK BOXES (Feed Sidebar, Trending, News)
   =========================================================== */

[data-theme="light"] .sidebar .card,
[data-theme="light"] #trendingTags,
[data-theme="light"] #newsBlock {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1e293b !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Headings inside the sidebar cards */
[data-theme="light"] .sidebar .card h3,
[data-theme="light"] .trending-header {
  color: #ef4444 !important; /* orange/red accent */
}

/* Links inside Trending + News */
[data-theme="light"] .sidebar .card a,
[data-theme="light"] #trendingTags a,
[data-theme="light"] #newsBlock a {
  color: #2563eb !important;
  font-weight: 500;
}

[data-theme="light"] .sidebar .card a:hover {
  text-decoration: underline !important;
}

/* Subtexts, timestamps, small text */
[data-theme="light"] .sidebar .card p,
[data-theme="light"] .sidebar .card span,
[data-theme="light"] .sidebar .card small,
[data-theme="light"] #newsBlock li {
  color: #374151 !important;
}

/* Optional subtle gradient for background to enhance contrast
[data-theme="light"] body.bg {
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
  color: #1e293b !important;
} */

[data-theme="light"] body.bg {
  background: radial-gradient(circle at top left, #f6f6f6, #e9e9e9 80%) !important;
}

/* ===========================================================
   📝 CREATE POST AREA — Light Theme Override
   =========================================================== */

/* Main create-post card */
[data-theme="light"] .create-post {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Post textarea */
[data-theme="light"] .create-post textarea {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 10px !important;
  resize: vertical !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Label and small text inside create post */
[data-theme="light"] .create-post label,
[data-theme="light"] .create-post span {
  color: #4b5563 !important;
}

/* Post Type dropdown */
[data-theme="light"] select#post_type {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  appearance: none !important;
}

/* Dropdown options */
[data-theme="light"] select#post_type option {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* File label (“Attach media”) */
[data-theme="light"] .file-label {
  color: #374151 !important;
}

/* Primary button (Post) in light mode */
[data-theme="light"] .btn.btn-primary {
  background: #16a34a !important;   /* fresh green accent */
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease;
}

[data-theme="light"] .btn.btn-primary:hover {
  background: #15803d !important;
}

/* Secondary buttons (Cancel, etc.) */
[data-theme="light"] .btn.btn-secondary {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

[data-theme="light"] .btn.btn-secondary:hover {
  background: #e5e7eb !important;
}

/* Post Type label */
[data-theme="light"] label[for="post_type"] {
  color: #374151 !important;
}

/* Dropdown arrow fix (for dark-to-light consistency) */
[data-theme="light"] select#post_type::-ms-expand {
  background: transparent !important;
}
/* ===========================================================
   🎨 Post Type Dropdown — Restore Arrow in Light Mode
   =========================================================== */

[data-theme="light"] select#post_type {
  position: relative;
  background: #ffffff url("data:image/svg+xml,%3Csvg fill='none' stroke='%23343a40' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  appearance: none !important;
}

/* Keep arrow visible in Chrome/Safari/Edge */
[data-theme="light"] select#post_type::-ms-expand {
  display: none !important;
}

/* On hover/focus, highlight border */
[data-theme="light"] select#post_type:hover,
[data-theme="light"] select#post_type:focus {
  border-color: #9ca3af !important;
  outline: none !important;
}

/* ===========================================================
   ✨ LIGHT THEME POST-TYPE GLOWS (final tuned version)
   =========================================================== */

/* 🏛 Official Statement — Deeper Gold Glow */
[data-theme="light"] .post-card.official_statement {
  border: none !important;
  background: #fff8d9 !important; /* richer cream yellow */
  box-shadow:
    0 0 0 2px rgba(255, 200, 0, 0.7),
    0 0 18px rgba(255, 190, 0, 0.65);
  position: relative;
  transition: box-shadow 0.3s ease-in-out;
}

[data-theme="light"] .post-badge.official {
  background: linear-gradient(90deg, #ffcc00, #ffb300);
  color: #000;
  box-shadow: 0 0 10px rgba(255, 200, 0, 0.6);
}

/* 🎖 Milestone — Rich Silver-Grey Glow */
[data-theme="light"] .post-card.milestone {
  border: none !important;
  background: #f3f3f5 !important; /* slightly darker neutral grey */
  box-shadow:
    0 0 0 2px rgba(120, 120, 120, 0.55),
    0 0 16px rgba(130, 130, 130, 0.5);
  position: relative;
}

[data-theme="light"] .post-badge.milestone {
  background: linear-gradient(90deg, #d9d9d9, #b3b3b3);
  color: #111;
  box-shadow: 0 0 10px rgba(140, 140, 140, 0.5);
}

/* 📅 Commitment — Stronger Blue Glow */
[data-theme="light"] .post-card.commitment {
  border: none !important;
  background: #e3f2fd !important; /* slightly deeper blue tint */
  box-shadow:
    0 0 0 2px rgba(0, 140, 255, 0.7),
    0 0 18px rgba(0, 120, 255, 0.65);
  position: relative;
}

[data-theme="light"] .post-badge.commitment {
  background: linear-gradient(90deg, #0094ff, #0069e6);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 120, 255, 0.55);
}

/* 💚 Mention Highlight — Matches Commitment Style */
[data-theme="light"] .post-card.mention-highlight {
  background: #e8fdf0 !important; /* soft green background like commitment blue */
  border: none !important;
  box-shadow: none !important;
}


/* 📅 Commitment Meta Box (Due + Status) */
[data-theme="light"] .commitment-meta {
  background: rgba(0, 153, 255, 0.1) !important;
  border: 1px solid rgba(0, 153, 255, 0.35) !important;
  color: #1f2937 !important;
}

/* 🌟 Optional hover lift */
[data-theme="light"] .post-card.official_statement:hover,
[data-theme="light"] .post-card.milestone:hover,
[data-theme="light"] .post-card.commitment:hover,
[data-theme="light"] .mention-highlight:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ===========================================================
   🔗 Hashtag & Mention Colors — Keep Consistent Blue in Light Mode
   =========================================================== */

[data-theme="light"] a[href*="#"],
[data-theme="light"] .post-content a[href*="#"],
[data-theme="light"] a.hashtag {
  color: #1d9bf0 !important;         /* same blue as dark mode */
  font-weight: 600;
  text-decoration: none;
}

[data-theme="light"] a[href*="#"]:hover,
[data-theme="light"] .post-content a[href*="#"]:hover,
[data-theme="light"] a.hashtag:hover {
  text-decoration: underline;
  color: #0d8de6 !important;        /* slight darker shade on hover */
}

/* ===========================================================
   🧡 Mentions (@username) — Keep Orange Accent in Light Mode
   =========================================================== */

[data-theme="light"] a[href*="@"],
[data-theme="light"] .post-content a[href*="@"],
[data-theme="light"] a.mention {
  color: #ff7b00 !important;          /* same vibrant orange as dark mode */
  font-weight: 600;
  text-decoration: none;
}

[data-theme="light"] a[href*="@"]:hover,
[data-theme="light"] .post-content a[href*="@"]:hover,
[data-theme="light"] a.mention:hover {
  text-decoration: underline;
  color: #e56b00 !important;          /* slightly darker orange on hover */
}

/* ==============================
   🔍 Search (Light Theme)
   ============================== */

/* wrapper pill */
[data-theme="light"] .search-wrapper {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 9999px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}

/* icon */
[data-theme="light"] .search-wrapper .fa-search {
  color: #9ca3af !important;
}

/* input */
[data-theme="light"] #userSearchInput {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: #111827 !important;
  width: 260px !important;   /* adjust if you like */
}

[data-theme="light"] #userSearchInput::placeholder {
  color: #9ca3af !important;
}

/* focus glow */
[data-theme="light"] .search-wrapper:focus-within {
  border-color: #ff9900 !important;
  box-shadow:
    0 0 0 1px rgba(255,165,0,.35),
    0 0 10px rgba(255,153,0,.25) !important;
}

/* dropdown panel */
[data-theme="light"] .search-dropdown {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

/* items inside dropdown (optional – only if these classes exist) */
[data-theme="light"] .search-dropdown .result-item {
  background: #fff !important;
  color: #111827 !important;
}
[data-theme="light"] .search-dropdown .result-item:hover {
  background: #f8fafc !important;
}

/* ==========================================================
   ⚙️ SETTINGS PAGE — LIGHT THEME
   ========================================================== */

[data-theme="light"] .card {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  padding: 25px !important;
  transition: box-shadow 0.2s ease-in-out;
}

[data-theme="light"] .card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

/* Headings */
[data-theme="light"] h2 {
  color: #1f2937 !important;
}

[data-theme="light"] h3 {
  font-size: 1.1rem !important;
  color: #111827 !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 6px !important;
  margin-bottom: 15px !important;
}

/* Form Inputs */
[data-theme="light"] .card input,
[data-theme="light"] .card textarea {
  width: 100% !important;
  padding: 10px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .card input:focus,
[data-theme="light"] .card textarea:focus {
  background: #fff !important;
  border-color: #ff9900 !important;
  box-shadow: 0 0 0 1px rgba(255, 153, 0, 0.3) !important;
  outline: none !important;
}

/* Labels */
[data-theme="light"] .card label {
  display: block !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
  color: #374151 !important;
}

/* Buttons */
[data-theme="light"] .btn-primary {
  background: linear-gradient(90deg, #ff9933, #138808) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

[data-theme="light"] .btn-primary:hover {
  transform: translateY(-1px) !important;
  opacity: 0.9 !important;
}

[data-theme="light"] .btn-secondary:not(.open-quote) {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

[data-theme="light"] .btn-secondary:hover {
  background: #e5e7eb !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-danger {
  background: linear-gradient(90deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

[data-theme="light"] .btn-danger:hover {
  opacity: 0.9 !important;
}

[data-theme="light"] .btn-warning {
  background: linear-gradient(90deg, #facc15, #eab308) !important;
  color: #111 !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: opacity 0.2s ease !important;
}

[data-theme="light"] .btn-warning:hover {
  opacity: 0.9 !important;
}

/* Paragraphs and Descriptions */
[data-theme="light"] .card p {
  color: #4b5563 !important;
}

/* Danger and Deactivate Zones */
[data-theme="light"] h3[style*="color:#f55"] {
  color: #dc2626 !important;
}

[data-theme="light"] form[action*="deactivate_account"] h3 {
  color: #d97706 !important;
}

/* Divider Lines */
[data-theme="light"] hr {
  border: none !important;
  border-top: 1px solid #e5e7eb !important;
}

/* Search Placeholder in Header */
[data-theme="light"] .site-header .search-wrapper input::placeholder {
  color: #9ca3af !important;
  opacity: 0.9 !important;
}

/* ==========================================================
   👤 PROFILE PAGE — LIGHT THEME
   ========================================================== */

/* Main container */
[data-theme="light"] .profile-container {
  background: transparent !important;
  color: #1f2937 !important;
}

/* Profile Header */
[data-theme="light"] .profile-header {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .profile-header h2 {
  color: #111827 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .profile-header p {
  color: #4b5563 !important;
}

/* Verified Icon */
[data-theme="light"] .verified-icon {
  color: #2563eb !important;
}

/* Info Fields */
[data-theme="light"] .profile-info p strong {
  color: #111827 !important;
}

/* Editable Form */
[data-theme="light"] form[action*="edit_profile"] {
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 15px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] form[action*="edit_profile"] label {
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* Inputs and Textareas */
[data-theme="light"] form[action*="edit_profile"] input,
[data-theme="light"] form[action*="edit_profile"] select,
[data-theme="light"] form[action*="edit_profile"] textarea {
  width: 100% !important;
  padding: 8px 10px !important;
  margin-bottom: 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] form[action*="edit_profile"] input:focus,
[data-theme="light"] form[action*="edit_profile"] textarea:focus,
[data-theme="light"] form[action*="edit_profile"] select:focus {
  background: #fff !important;
  border-color: #ff9900 !important;
  box-shadow: 0 0 0 1px rgba(255, 153, 0, 0.3) !important;
  outline: none !important;
}

/* Buttons */
[data-theme="light"] .profile-actions .btn-primary {
  background: linear-gradient(90deg, #ff9933, #138808) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

[data-theme="light"] .profile-actions .btn-primary:hover {
  transform: translateY(-1px) !important;
  opacity: 0.9 !important;
}

[data-theme="light"] .profile-actions .btn-secondary {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

[data-theme="light"] .profile-actions .btn-secondary:hover {
  background: #e5e7eb !important;
  transform: translateY(-1px) !important;
}

/* Posts Section */
[data-theme="light"] .profile-container h3 {
  color: #111827 !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
}

/* Post Cards */
[data-theme="light"] .profile-container .post.card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  color: #1f2937 !important;
}

[data-theme="light"] .profile-container .post.card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
}

/* Media inside posts */
[data-theme="light"] .profile-container .post.card .media-grid img {
  border-radius: 6px !important;
  border: 1px solid #e5e7eb !important;
}

/* Timestamp */
[data-theme="light"] .profile-container .timestamp {
  color: #6b7280 !important;
  font-size: 0.85rem !important;
}

/* Divider */
[data-theme="light"] .profile-container hr {
  border: none !important;
  border-top: 1px solid #e5e7eb !important;
}

/* Bio and Sub Info */
[data-theme="light"] .bio {
  color: #4b5563 !important;
}

[data-theme="light"] .bio.muted {
  color: #9ca3af !important;
}

[data-theme="light"] .location {
  color: #6b7280 !important;
}

[data-theme="light"] .joined {
  color: #6b7280 !important;
}

/* ==========================================================
   📥 MESSAGE INBOX PAGE — LIGHT THEME
   ========================================================== */

[data-theme="light"] .container {
  background: transparent !important;
  color: #1f2937 !important;
}

[data-theme="light"] .container h2 {
  color: #111827 !important;
  text-align: center !important;
  margin-top: 20px !important;
}

[data-theme="light"] .container hr {
  border: none !important;
  border-top: 1px solid #e5e7eb !important;
  margin-bottom: 20px !important;
}

/* Conversation Card */
[data-theme="light"] .conversation-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  padding: 12px !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .conversation-card:hover {
  background: #f3f4f6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Unread Conversations */
[data-theme="light"] .conversation-card.unread {
  background: rgba(255, 153, 51, 0.1) !important;
  border: 1px solid rgba(255, 153, 51, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 153, 51, 0.3) !important;
  transform: scale(1.01) !important;
}

/* Profile Picture */
[data-theme="light"] .conversation-card img {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  border: 1px solid #e5e7eb !important;
  object-fit: cover !important;
}

/* User Info Section */
[data-theme="light"] .conversation-card strong {
  color: #111827 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .conversation-card small {
  color: #6b7280 !important;
  font-size: 0.85rem !important;
}

/* Time Stamp */
[data-theme="light"] .conversation-card > div {
  font-size: 0.8rem !important;
  color: #6b7280 !important;
}

/* Verified Badge */
[data-theme="light"] .verified-icon {
  color: #2563eb !important;
  font-size: 0.8rem !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}

/* Unread Badge */
[data-theme="light"] .unread-badge {
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  border-radius: 50% !important;
  padding: 3px 7px !important;
  min-width: 18px !important;
  text-align: center !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
}

/* Empty State */
[data-theme="light"] .container p {
  color: #6b7280 !important;
  text-align: left !important;
  margin-top: 30px !important;
}


/* ===========================
   Chat page – light overrides
   (place at END of light-theme.css)
   =========================== */

/* Light background for the whole chat area */
[data-theme="light"] .chat-container,
[data-theme="light"] .chat-main,
[data-theme="light"] #chat-box,
[data-theme="light"] .chat-messages {
  background: #fafafa !important;
  color: #111 !important;
}

/* Header + separators */
[data-theme="light"] .chat-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Input bar container */
[data-theme="light"] .chat-input {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}

/* The text field (id is message-input) */
[data-theme="light"] input#message-input {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05) !important;
}
[data-theme="light"] input#message-input::placeholder {
  color: #9ca3af !important;
}

/* Received bubbles (the black ones) */
[data-theme="light"] .chat-message.received,
[data-theme="light"] .chat-message:not(.sent) {   /* covers cases where 'received' class is absent */
  background: #f1f5f9 !important;   /* light gray */
  color: #111 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

/* Keep your sent bubbles readable on light bg */
[data-theme="light"] .chat-message.sent {
  background: #f59e0b !important;   /* similar orange */
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, .35) !important;
}


/* 🌞 Fix black message bubbles in light theme */
[data-theme="light"] .chat-box div[style*="background:#333"],
[data-theme="light"] .chat-box div[style*="background: #333"],
[data-theme="light"] .chat-message,
[data-theme="light"] .chat-message.received {
  background: #f3f4f6 !important;   /* soft light gray */
  color: #111 !important;           /* dark readable text */
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* 🌤 Light orange message bubbles for received messages */
[data-theme="light"] .chat-box div[style*="background:#333"],
[data-theme="light"] .chat-box div[style*="background: #333"],
[data-theme="light"] .chat-message,
[data-theme="light"] .chat-message.received {
  background: #ffe8cc !important;      /* soft light orange */
  color: #222 !important;              /* dark text for readability */
  border: 1px solid #ffd6a5 !important;
  box-shadow: 0 1px 3px rgba(255, 170, 51, 0.25) !important;
}

/* Keep your sent bubbles bold orange */
[data-theme="light"] .chat-message.sent {
  background: #f97316 !important;      /* bright orange */
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3) !important;
}

/* Chat input area styling */
[data-theme="light"] .chat-input {
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
}

[data-theme="light"] input#message-input {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

[data-theme="light"] input#message-input::placeholder {
  color: #9ca3af !important;
}


/* === Light Mode Sidebar Overrides === */
[data-theme="light"] .floating-sidebar {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .floating-sidebar .sidebar-profile {
  border-bottom: 1px solid #e6e6e6 !important;
}

[data-theme="light"] .floating-sidebar .menu a,
[data-theme="light"] .floating-sidebar .logout-btn,
[data-theme="light"] .floating-sidebar .theme-toggle {
  background: #ffffff !important;
  color: #333 !important;
  border-radius: 10px;
}

[data-theme="light"] .floating-sidebar .menu a:hover,
[data-theme="light"] .floating-sidebar .logout-btn:hover,
[data-theme="light"] .floating-sidebar .theme-toggle:hover {
  background: #ffe6cc !important; /* light orange hover */
  color: #ff6600 !important;
}

[data-theme="light"] .floating-sidebar .menu a i,
[data-theme="light"] .floating-sidebar .logout-btn i,
[data-theme="light"] .floating-sidebar .theme-toggle i {
  color: #777 !important;
}

[data-theme="light"] .floating-sidebar .footer {
  color: #888 !important;
  border-top: 1px solid #e6e6e6 !important;
  background: #fafafa !important;
}

/* Sidebar Profile Text */
[data-theme="light"] .floating-sidebar .username {
  color: #333 !important;
}

/* Fix: posts are centering in light mode */
[data-theme="light"] .card.post-card {
  text-align: left !important;        /* reset any global card centering */
  align-items: stretch !important;     /* if a flex parent was centering vertically */
}

/* Ensure all typical post sections stay left-aligned */
[data-theme="light"] .card.post-card .post-header,
[data-theme="light"] .card.post-card .content,
[data-theme="light"] .card.post-card p,
[data-theme="light"] .card.post-card .meta,
[data-theme="light"] .card.post-card .media-grid,
[data-theme="light"] .card.post-card .comments,
[data-theme="light"] .card.post-card .comment {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* ✅ Reaction bar exception — restore horizontal alignment */
[data-theme="light"] .card.post-card .reaction-bar {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important; /* center vertically */
  gap: 16px !important;           /* nice even spacing between icons */
}

/* ==========================================
   💬 Comment Box Width Fix for Light Mode — Final Guaranteed
   ========================================== */

/* Use attribute selector and :where() for highest specificity neutrality */
:where(html[data-theme="light"], body[data-theme="light"]) .comment-section form[action*="/comment"] input[type="text"] {
  width: 80% !important;                  /* match dark mode width */
  max-width: calc(100% - 90px) !important; /* ensure room for Post button */
  display: inline-block !important;
  vertical-align: middle !important;
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
}

/* Keep Post button aligned inline */
:where(html[data-theme="light"], body[data-theme="light"]) .comment-section form[action*="/comment"] button {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  background: #00b050 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

/* Optional: hover color consistency */
:where(html[data-theme="light"], body[data-theme="light"]) .comment-section form[action*="/comment"] button:hover {
  background: #009240 !important;
}


/* ==========================================
   💬 Comment "Post" Button Alignment Fix — Light Mode
   ========================================== */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comment"] {
  display: block !important; /* keep layout same as dark mode */
}

:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comment"] input[type="text"] {
  width: 80% !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  vertical-align: middle !important;
}

/* Center the Post button perfectly without changing height or layout */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comment"] button {
  position: relative !important;
  top: -4px !important;          /* 👈 fine-tune to center vertically */
  margin-left: 4px !important;
  background: #00b050 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comment"] button:hover {
  background: #009240 !important;
}

/* ==========================================
   🩷 Final — Comment Like Button Without Border (Light Mode)
   ========================================== */

/* Base state */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comments/"] button.like-btn {
  background: transparent !important;
  border: none !important;              /* 🔸 Removed border */
  color: #ff007f !important;            /* pink heart */
  font-weight: normal !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, color 0.15s ease, background 0.2s ease;
  padding: 4px 6px !important;
}

/* Hover effect — soft tint */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comments/"] button.like-btn:hover {
  background: rgba(255, 0, 127, 0.08) !important;
  transform: translateY(-1px);
}

/* Liked state — keep heart filled, no background */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comments/"] button.like-btn.liked {
  color: #ff007f !important;
  background: transparent !important;
  border: none !important;
}

/* Unliked — outline emoji still pink */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section form[action*="/comments/"] button.like-btn[style*="🤍"] {
  background: transparent !important;
  color: #ff007f !important;
}

/* Delete "No" button fix still retained */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section button:not(.like-btn):not(.edit-comment):not(.delete-comment):not(.btn-danger):not(.btn-primary) {
  background: #f5f5f5 !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

:where(html[data-theme="light"], body[data-theme="light"])
.comment-section button:not(.like-btn):not(.edit-comment):not(.delete-comment):not(.btn-danger):not(.btn-primary):hover {
  background: #e8e8e8 !important;
}

/* Keep Edit/Delete colors */
:where(html[data-theme="light"], body[data-theme="light"])
.comment-section .edit-comment {
  background: none !important;
  border: none !important;
  color: #ff7f00 !important;
  cursor: pointer !important;
}

:where(html[data-theme="light"], body[data-theme="light"])
.comment-section .delete-comment {
  background: none !important;
  border: none !important;
  color: #ff4f4f !important;
  cursor: pointer !important;
}


/* =========================================================
   🟠 YES / NO (inline delete confirm) — Orange outline (LIGHT)
   Wins against any earlier !important rules.
   ========================================================= */

html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-yes,
html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-no {
  /* reset any previous force styles */
  background: #ffffff !important;
  color: #ff7f00 !important;
  border: 1.5px solid #ff7f00 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  display: inline-block !important;
  line-height: 1 !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-yes:hover,
html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-no:hover {
  background: #ff7f00 !important;
  color: #ffffff !important;
  border-color: #ff7f00 !important;
}

/* Keep the little “Delete this comment?” inline row tidy in light mode */
html[data-theme="light"] .comment-section .inline-delete-confirm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
/* =========================================================
   ✨ YES / NO buttons — match exact glow of Save button
   ========================================================= */

html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-yes,
html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-no {
  background: #ffffff !important;
  color: #ff7f00 !important;
  border: 1.5px solid #ff7f00 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  display: inline-block !important;
  line-height: 1 !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;

  /* 👇 Match Save button glow exactly */
  box-shadow: 0 2px 4px rgba(255, 127, 0, 0.25), 0 0 0 1px rgba(255, 127, 0, 0.15) !important;
}

html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-yes:hover,
html[data-theme="light"] .comment-section .inline-delete-confirm > .confirm-delete-no:hover {
  background: #ff7f00 !important;
  color: #ffffff !important;
  border-color: #ff7f00 !important;
  box-shadow: 0 2px 4px rgba(255, 127, 0, 0.25), 0 0 0 1px rgba(255, 127, 0, 0.15) !important;
}

/* ==========================================================
   👤 Profile Hover Popup — Light Mode Variant
   ========================================================== */
[data-theme="light"] .profile-popup {
  background: var(--color-surface, #fff);
  color: var(--color-text, #111);
  border: 1px solid var(--color-border, #ddd);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px;
  width: max-content;
  max-width: 90vw;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

/* Avatar */
[data-theme="light"] .profile-popup img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 122, 0, 0.25);
  object-fit: cover;
}

/* Name & text */
[data-theme="light"] .profile-popup h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 6px 0 2px;
  color: var(--color-text);
}

[data-theme="light"] .profile-popup .username {
  color: var(--color-muted, #555);
  font-size: 0.9rem;
  font-weight: 500;
}

[data-theme="light"] .profile-popup .bio {
  margin-top: 8px;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Stats & divider */
[data-theme="light"] .profile-popup .stats {
  margin-top: 10px;
  font-size: 0.88rem;
  color: #555;
}
[data-theme="light"] .profile-popup .divider {
  height: 1px;
  background: var(--color-border, #ddd);
  margin: 10px 0;
}

/* Buttons */
[data-theme="light"] .profile-popup .summary-btn {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--color-accent, #ff7a00);
  border: 1px solid rgba(255, 122, 0, 0.6);
  border-radius: 9999px;
  padding: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
[data-theme="light"] .profile-popup .summary-btn:hover {
  background: var(--color-accent, #ff7a00);
  color: #fff;
}

/* Follow button */
[data-theme="light"] .profile-popup .follow-btn {
  background: linear-gradient(90deg, #ff7a00 0%, #00b64e 100%);
  border: none;
  color: #fff;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
[data-theme="light"] .profile-popup .follow-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
/* 💫 Light Mode – Style follower/following counts */
html[data-theme="light"] .profile-popup .stats b {
  color: #ff7a00;      /* pick any color you like */
  font-weight: 700;
}


[data-theme="light"] .profile-popup .stats span {
  font-weight: 700;           /* bold numbers */
  color: #ff7a00;             /* your orange brand accent */
}

/* 🧩 Align Edit/Delete buttons to the right in light mode */
html[data-theme="light"] .post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* make sure user section and actions align nicely */
html[data-theme="light"] .post-header .post-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 🖊 Light theme: keep Edit/Delete visible on hover */
html[data-theme="light"] .post-header .post-actions .btn-icon {
  color: #444;                  /* normal text color */
  font-weight: 500;
}

html[data-theme="light"] .post-header .post-actions .btn-icon:hover {
  color: #000;                  /* darker on hover */
  background-color: rgba(0,0,0,0.05);  /* subtle hover background */
  border-radius: 6px;
  transition: 0.2s ease;
}



/* === Light theme: match delete modal exactly to dark mode === */
html[data-theme="light"] #deleteModal.modal {
  background: rgba(0, 0, 0, 0.7) !important; /* dimmed backdrop */
}

html[data-theme="light"] #deleteModal .modal-content {
  background: #111827 !important;            /* dark navy background */
  color: #f1f5f9 !important;                 /* soft white text */
  border: 1px solid #1f2937 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  border-radius: 10px !important;
}

/* 🧱 Title — remove underline line after Confirm Delete */
html[data-theme="light"] #deleteModal .modal-header {
  border-bottom: none !important;            /* removes that line */
}

html[data-theme="light"] #deleteModal h3 {
  color: #f9fafb !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

/* 📝 Message text */
html[data-theme="light"] #deleteModal p {
  color: #e5e7eb !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* 🔴 Delete button */
html[data-theme="light"] #deleteModal .btn-danger {
  background-color: #dc2626 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
html[data-theme="light"] #deleteModal .btn-danger:hover {
  background-color: #b91c1c !important;
}

/* ⚪ Cancel button */
html[data-theme="light"] #deleteModal .btn-secondary {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
  border: 1px solid #374151 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
html[data-theme="light"] #deleteModal .btn-secondary:hover {
  background-color: #374151 !important;
}

/* ❌ Close (×) icon */
html[data-theme="light"] #deleteModal .close {
  color: #9ca3af !important;
  transition: color 0.2s ease !important;
}
html[data-theme="light"] #deleteModal .close:hover {
  color: #f9fafb !important;
}

/* ==========================================================
   👥 Suggested Users (Light Theme Fix)
   ========================================================== */
[data-theme="light"] .user-card {
  background: #ffffff !important;        /* make each card white */
  border: 1px solid #e5e7eb !important;  /* light gray border */
  color: #111827 !important;             /* readable dark text */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  border-radius: 10px !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover state for visual feedback */
[data-theme="light"] .user-card:hover {
  background: #f9fafb !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Reset variable-based dark background if used */
[data-theme="light"] :root {
  --card-bg: #ffffff !important;
  --border-color: #e5e7eb !important;
}

/* ==========================================================
   💡 Light Mode - Users Like List Pop up
   ========================================================== */
[data-theme="light"] .user-list-modal .modal-content {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Header */
[data-theme="light"] .user-list-modal h3 {
  color: #ff007f !important; /* matches heart icon color */
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

/* User list items */
[data-theme="light"] .user-list-modal .user-list li {
  background: transparent !important;
  color: #111 !important;
}

[data-theme="light"] .user-list-modal .user-list li a {
  color: #111 !important;
  text-decoration: none;
}

[data-theme="light"] .user-list-modal .user-list li a:hover {
  color: #ff007f !important;
}

/* Avatar borders for better contrast */
[data-theme="light"] .user-list-modal .user-list img {
  border: 1px solid #ccc !important;
}

/* ==========================================================
   🔧 PROFILE PAGE SPACING FIX
   ========================================================== */
html[data-theme="light"] .profile-header {
  margin-bottom: 0px !important;
}

html[data-theme="light"] .profile-info {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  gap: 0px !important;
}

html[data-theme="light"] .profile-info p {
  margin: 2px 0 !important;
  line-height: 1.4 !important;
}


/* ==========================================================
   🧭 RIGHT SIDEBAR SCROLL
   ========================================================== */
html[data-theme="light"] .sidebar {
  flex: 1 !important;
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start !important;
  height: calc(100vh - 100px) !important; /* fits viewport minus header */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  max-width: 360px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #bbb #f5f5f5 !important; /* lighter scroll thumb & track */
}

/* 🎨 Scrollbar styling for Chrome, Edge, Safari */
html[data-theme="light"] .sidebar::-webkit-scrollbar {
  width: 8px !important;
}

html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
  background-color: #bbb !important;
  border-radius: 4px !important;
}

html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #999 !important;
}

html[data-theme="light"] .sidebar::-webkit-scrollbar-track {
  background-color: #f5f5f5 !important;
}


/* ==========================================================
   🩵 PROFILE HEADER STRUCTURE FIX — Light Mode
   Match layout of dark mode (username row + info below)
   ========================================================== */

html[data-theme="light"] .profile-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;              /* space between avatar and info block */
  text-align: left !important;
}

html[data-theme="light"] .profile-header .avatar {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Stack username row and info block vertically */
html[data-theme="light"] .profile-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* Username row (contains @XYZ + buttons) */
html[data-theme="light"] .profile-top {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}

/* Info text below username row */
html[data-theme="light"] .profile-info p {
  margin: 2px 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Consistent left alignment and spacing */
html[data-theme="light"] .profile-header h2,
html[data-theme="light"] .profile-header p,
html[data-theme="light"] .profile-header span {
  text-align: left !important;
}



/* ==========================================================
   🩵 FIX: Light mode post width stretch (keep dark mode intact)
   ========================================================== */
[data-theme="light"] .profile-container {
  align-items: stretch !important;   /* let children take full width */
}

[data-theme="light"] .profile-container .profile-header,
[data-theme="light"] .profile-container .posts,
[data-theme="light"] .profile-container .profile-posts {
  max-width: 850px !important;       /* match dark mode width */
  width: 100% !important;
  margin: 0 auto !important;
}

[data-theme="light"] .profile-container .post.card {
  width: 100% !important;
  text-align: left !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

[data-theme="light"] .profile-container .post.card p,
[data-theme="light"] .profile-container .post.card span,
[data-theme="light"] .profile-container .post.card small {
  text-align: left !important;
}


/* ================================
   LIGHT MODE — Analytics pages only
   ================================ */

/* Creator Analytics card */
html[data-theme="light"] main.main-content.container > h2 + .card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  padding: 20px !important;
}

/* Text inside Creator Analytics card */
html[data-theme="light"] main.main-content.container > h2 + .card p {
  color: #374151 !important;       /* slate-700 */
  text-align: left !important;     /* align details left */
  margin: 6px 0 !important;
}

/* Numeric values inside Creator Analytics */
html[data-theme="light"] main.main-content.container > h2 + .card p strong {
  color: #2563eb !important;       /* blue-600 for numbers */
  font-weight: 700 !important;
}

/* Section heading color */
html[data-theme="light"] main.main-content.container h2 {
  color: #111827 !important;       /* gray-900 */
  text-align: left !important;
  margin-left: 30px !important;
}

/* ========================
   Profile Growth Dashboard
   ======================== */
html[data-theme="light"] .analytics-summary {
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 25px !important;
  margin: 20px 30px !important;
  flex-wrap: wrap !important;
}

/* Metric cards */
html[data-theme="light"] .analytics-summary .metric-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
  width: 250px !important;
  text-align: center !important;
  border-radius: 10px !important;
  padding: 20px !important;
  transition: all 0.2s ease-in-out;
}

/* Follower number — blue tone */
html[data-theme="light"] .analytics-summary .metric-card:nth-of-type(1) h3 {
  color: #2563eb !important;
  font-weight: 700 !important;
}

/* Impressions number — green tone */
html[data-theme="light"] .analytics-summary .metric-card:nth-of-type(2) h3 {
  color: #16a34a !important;
  font-weight: 700 !important;
}

/* Labels under numbers */
html[data-theme="light"] .analytics-summary .metric-card p {
  color: #4b5563 !important;
  font-weight: 500 !important;
}

/* Hover polish */
html[data-theme="light"] .analytics-summary .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* ========================
   Upgrade banner section
   ======================== */
html[data-theme="light"] .upgrade-banner {
  background: #fff8e1 !important;
  border: 1px solid #ffe082 !important;
  color: #333 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  margin: 20px 30px !important;
  padding: 18px 25px !important;
  border-radius: 10px !important;
  text-align: left !important;       /* Left-align entire banner */
}

/* Headings inside upgrade banner */
html[data-theme="light"] .upgrade-banner h4,
html[data-theme="light"] .upgrade-banner strong {
  display: block !important;
  color: #111827 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

/* Paragraph text */
html[data-theme="light"] .upgrade-banner p {
  color: #374151 !important;
  text-align: left !important;
  margin: 4px 0 20px 0 !important;
}

/* Button stays as is */
html[data-theme="light"] .upgrade-banner .btn-primary,
html[data-theme="light"] .upgrade-banner a.btn-primary,
html[data-theme="light"] .upgrade-banner button {
  background: linear-gradient(90deg, #f59e0b, #22c55e) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out;
}


/* ===================================
   LIGHT MODE — Chart.js visibility fix (CSS-only workaround)
   =================================== */

/* LIGHT MODE — make canvas content darker for readability */
html[data-theme="light"] canvas {
  /* tweak numbers to taste */
  filter: contrast(1.25) brightness(0.75) saturate(1.05) !important;
}

/* Ensure the chart card itself stays light */
html[data-theme="light"] .bg-gray-900 {
  background: #fff !important;
  color: #000 !important;
  border-color: #e5e7eb !important;
}


/* ===================================
   Premium Plans Page - Light Mode Styling
   =================================== */

/* Header / Hero Section */
html[data-theme="light"] .plans-hero {
  text-align: center;
  margin: 6px 0 22px;
}
html[data-theme="light"] .plans-hero h2 {
  font-weight: 700;
  color: #111;
}
html[data-theme="light"] .plans-hero p {
  color: #555;
}

/* ===================================
   Plans Grid - Perfect 3-column Layout
   =================================== */
html[data-theme="light"] .plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  margin-top: 40px;
  padding: 0 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

html[data-theme="light"] .plan-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  min-height: 420px;
}

html[data-theme="light"] .plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Active Plan Highlight */
html[data-theme="light"] .plan-card.is-active {
  border-color: #f97316;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.3);
}

/* Plan Variants */
html[data-theme="light"] .plan-plus {
  background: linear-gradient(145deg, #f3f9ff, #e6f3ff);
  border-color: #38bdf840;
}
html[data-theme="light"] .plan-premium {
  background: linear-gradient(145deg, #f8f3ff, #f1e6ff);
  border-color: #a855f740;
}

/* Responsive Fallback */
@media (max-width: 1024px) {
  html[data-theme="light"] .plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }
}

/* ===================================
   Plan Card Elements
   =================================== */
html[data-theme="light"] .plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html[data-theme="light"] .plan-tagline {
  margin-top: 8px;
  color: #555;
}

html[data-theme="light"] .price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #16a34a;
  margin-top: 8px;
}
html[data-theme="light"] .price span {
  font-weight: 400;
  font-size: 0.9rem;
  color: #777;
}

/* ===================================
   Pill Badges
   =================================== */
html[data-theme="light"] .pill-current {
  background: linear-gradient(90deg, #ffb84d, #ffd280);
  color: #111;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 0 10px rgba(255, 136, 0, 0.25);
}
html[data-theme="light"] .pill-soft {
  background: rgba(0, 188, 212, 0.1);
  color: #0284c7;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 3px 10px;
}
html[data-theme="light"] .pill-pop {
  background: rgba(186, 104, 200, 0.1);
  color: #7e22ce;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ===================================
   Plan Features List
   =================================== */
html[data-theme="light"] .plan-features {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
html[data-theme="light"] .plan-features li {
  margin: 6px 0;
  font-size: 0.95rem;
  color: #333;
}

/* ===================================
   Upgrade CTA Buttons (Green Glow)
   =================================== */
html[data-theme="light"] .cta-btn {
  display: inline-block;
  background: transparent;
  border: 1.8px solid #16a34a;
  color: #16a34a;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.4);
}

html[data-theme="light"] .cta-btn:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(22, 163, 74, 0.6);
}

html[data-theme="light"] .cta-btn:active {
  transform: scale(0.98);
}

html[data-theme="light"] .cta-btn.disabled {
  background: #eee !important;
  color: #999 !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* ===================================
   Comparison Table - Light Mode
   =================================== */
html[data-theme="light"] .plan-comparison {
  margin-top: 60px;
  padding: 0 20px;
  text-align: center;
}

html[data-theme="light"] .plan-comparison h3 {
  font-size: 1.3rem;
  margin-bottom: 16px;
  color: #222;
}

html[data-theme="light"] .plan-comparison table {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #ffffff; /* ✅ white background */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .plan-comparison th,
html[data-theme="light"] .plan-comparison td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .plan-comparison th {
  background: #f3f4f6; /* ✅ soft grey header */
  font-weight: 700;
  color: #16a34a; /* ✅ green accent */
  text-transform: uppercase;
  font-size: 0.85rem;
}

html[data-theme="light"] .plan-comparison td {
  color: #333;
  font-size: 0.9rem;
  background: #fff;
}

html[data-theme="light"] .plan-comparison tr:nth-child(even) td {
  background: #f9fafb; /* ✅ alternate row shading */
}

html[data-theme="light"] .plan-comparison tr:last-child td {
  border-bottom: none;
}

html[data-theme="light"] .plan-comparison td:first-child {
  text-align: left;
  font-weight: 600;
  color: #2563eb; /* ✅ blue label column */
}



/* ==========================================================
   🗓 Scheduled Posts Page (Light Theme Default)
   ========================================================== */
html[data-theme="light"] .scheduled-post {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .scheduled-container h2 {
  color: #1a1a1a;
  border-left-color: #ff7a00;
}

html[data-theme="light"] .scheduled-post .post-time {
  color: #666;
}

html[data-theme="light"] .scheduled-post .actions button {
  color: #555;
  border-color: #ddd;
}

html[data-theme="light"] .scheduled-post .actions button:hover {
  color: #111;
  border-color: #aaa;
}

/* ==========================================================
   Final unified datetime picker visibility (light + dark)
   ========================================================== */

/* Hidden state (default) */
#scheduled_at.vaani-picker-hidden {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.01 !important;      /* must NOT be 0 */
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Active / temporarily focusable state */
#scheduled_at.vaani-picker-active {
  position: fixed !important;
  opacity: 0.01 !important;      /* nearly invisible but focusable */
  pointer-events: auto !important;
  z-index: 9999 !important;
}


[data-theme="light"] input[type="datetime-local"].vaani-picker-hidden {
  position: fixed !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.01 !important; /* must NOT be 0 */
  pointer-events: none !important;
  z-index: -1 !important;
}

[data-theme="light"] input[type="datetime-local"].vaani-picker-active {
  position: fixed !important;
  opacity: 0.01 !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
/* =========================================
   🧭 Force fix for Light Theme datetime picker
   ========================================= */
[data-theme="light"] #scheduled_at {
  position: fixed !important;
  opacity: 0.01 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  left: auto !important;
  top: auto !important;
  z-index: 99999 !important;
}


/* =====================================
   🕒 Scheduled Posts - Light Theme Fix
   ===================================== */

.inline-editor .inline-edit-textarea {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.inline-editor .inline-edit-textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* Buttons — match feed style */
.save-edit {
  background: linear-gradient(90deg, #ffae00, #ff8800);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.save-edit:hover {
  background: linear-gradient(90deg, #ff9500, #ff6600);
}

.cancel-edit {
  background: #f8f9fa;
  color: #444;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 12px;
  margin-left: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cancel-edit:hover {
  background: #e6e6e6;
  color: #111;
}

/* =====================================
   🕒 Scheduled Posts Light Theme Text Fix
   ===================================== */
html[data-theme='light'] .post-card .post-content {
  color: #111 !important;
}

html[data-theme='light'] .post-card .meta,
html[data-theme='light'] .post-card .scheduled-time {
  color: #333 !important;
}

html[data-theme='light'] .edit-inline-form textarea {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  width: 100%;
}


/* ==========================================================
   🎨 PROFILE PAGE (LIGHT THEME)
   ========================================================== */

.profile-container,
.profile-header,
.profile-edit,
.pinned-section,
.posts-section {
  max-width: 850px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* --- Core Light Background Override --- */
[data-theme="light"] .profile-header,
[data-theme="light"] .profile-edit,
[data-theme="light"] .pinned-section,
[data-theme="light"] .posts-section,
[data-theme="light"] .profile-container,
[data-theme="light"] .post,
[data-theme="light"] .post.card,
[data-theme="light"] .pinned-card,
[data-theme="light"] .posts-section .card,
[data-theme="light"] .posts-section .posts {
  background-color: #ffffff !important;  /* pure white surface */
  color: #111827 !important;             /* dark text for contrast */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* --- Light off-white for nested posts (slight contrast) --- */
[data-theme="light"] .posts-section .post,
[data-theme="light"] .posts-section .post.card {
  background-color: #fafafa !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* --- Section title bar stays transparent --- */
[data-theme="light"] .section-title {
  background: transparent !important;
  color: #111827 !important;
  border-left: 4px solid var(--brand, #ff7a00) !important;
}

/* --- Form inputs match light scheme --- */
[data-theme="light"] .profile-edit input,
[data-theme="light"] .profile-edit select,
[data-theme="light"] .profile-edit textarea {
  background-color: #fff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
}

/* --- Keep consistent spacing between stacked blocks --- */
.profile-header { margin-bottom: 20px !important; }
.profile-edit   { margin-bottom: 20px !important; }
.pinned-section { margin-bottom: 20px !important; }

/* --- Layout grid for edit box --- */
.profile-container .profile-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  align-items: start;
}

/* --- Center Save Profile button --- */
.profile-container .profile-edit button {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 10px;
}

/* --- Align posts vertically with gap --- */
.posts-section .posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Mobile responsiveness --- */
@media (max-width: 720px) {
  .profile-container .profile-edit {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   ☀️ Light Theme — Create Post Buttons Alignment
   (2 Row Layout; 1st Row: Tone, AI Enhance, Post Type; Attach
    2nd Row: Schedule and Post)
   ========================================================= */

/* Base grid cleanup */
[data-theme="light"] .composer-grid {
  display: grid !important;
  grid-auto-rows: 32px !important;
  column-gap: 18px !important;
  row-gap: 10px !important;              /* spacing between row 1 & 2 */
  align-items: center !important;
}

/* Normalize all children */
[data-theme="light"] .composer-grid > div {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  gap: 6px !important;
}

/* ---------- Tone ---------- */
[data-theme="light"] label[for="aiTone"] {
  color:#333 !important;
  font-weight:600 !important;
  position:relative;
  top:-3px !important;                   /* ⬆️ raised Tone label slightly */
  margin-right:4px !important;
}
[data-theme="light"] #aiTone {
  background:#fff !important;
  color:#222 !important;
  border:1px solid #ccc !important;
  border-radius:6px !important;
  height:28px !important;
  padding:2px 10px !important;
}

/* ---------- AI Enhance ---------- */
[data-theme="light"] #aiAssistBtn {
  background:transparent !important;
  color:#444 !important;
  font-weight:600 !important;
  font-size:.93rem !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  height:28px !important;
  padding:0 10px !important;
  border-radius:6px !important;
  transition:background .2s ease !important;
}
[data-theme="light"] #aiAssistBtn:hover {
  background:#f2f3f5 !important;
  color:#000 !important;
}

/* ---------- Post Type ---------- */
[data-theme="light"] label[for="post_type"] {
  color:#333 !important;
  font-weight:600 !important;
  position:relative;
  top:-3.5px !important;                 /* lifted label slightly */
  margin-right:4px !important;
}
[data-theme="light"] #post_type {
  background:#fff !important;
  color:#222 !important;
  border:1px solid #ccc !important;
  border-radius:6px !important;
  height:28px !important;
  padding:2px 10px !important;
}

/* Bring Post Type block slightly toward Attach */
[data-theme="light"] .composer-grid > div:has(#post_type) {
  margin-left:36px !important;           /* closer to Attach */
}

/* ---------- Attach ---------- */
[data-theme="light"] .file-label {
  background:#f4f4f4 !important;
  color:#222 !important;
  border:1px solid #ccc !important;
  border-radius:6px !important;
  height:28px !important;
  padding:2px 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:background .2s ease !important;
}
[data-theme="light"] .file-label:hover {
  background:#e8eaed !important;
}

/* Nudge Attach upward and keep right-aligned */
[data-theme="light"] .composer-grid > div:has(.file-label) {
  justify-self:end !important;
  transform:translateY(-4px) !important;   /* ⬆️ lifted slightly more */
}

/* ---------- Post button ---------- */
[data-theme="light"] .btn.btn-primary {
  height:28px !important;
  padding:4px 14px !important;
  margin-left:0 !important;
  background:linear-gradient(90deg,#00c853,#009624) !important;
  color:#fff !important;
  border:none !important;
  border-radius:6px !important;
  font-weight:600 !important;
  font-size:.93rem !important;
  transform:translateY(-1px) !important;   /* optical lift */
}

/* ---------- Schedule label ---------- */
[data-theme="light"] #scheduleBtn {
  color:#444 !important;
  font-weight:600 !important;
}

/* ---------- AI Improved Content Box (Light Mode Fix) ---------- */
[data-theme="light"] #aiSuggestions {
  background:#f9fafb !important;       /* light neutral surface */
  color:#111 !important;               /* dark readable text */
  border:1px solid #e5e7eb !important;
  border-radius:8px !important;
  padding:12px 16px !important;
}

/* Make headings/bolds darker */
[data-theme="light"] #aiSuggestions strong,
[data-theme="light"] #aiSuggestions b {
  color:#111 !important;
}

/* Make hashtags/meta text readable */
[data-theme="light"] #aiSuggestions #aiHashtagsText,
[data-theme="light"] #aiSuggestions .hashtags {
  color:#333 !important;
  opacity:0.9 !important;
}



/* =========================================================
   LIGHT THEME — Word Counter Styling (Create + Edit, All Users)
   ========================================================= */

/* ---------- Base counter container ---------- */
[data-theme="light"] .word-counter,
[data-theme="light"] .word-count {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151 !important;            /* Neutral gray text */
  margin-top: 6px;
  margin-bottom: 6px;
  line-height: 1.35;
  user-select: none;
}

/* ---------- Reset any global span colors ---------- */
[data-theme="light"] .word-counter span,
[data-theme="light"] .word-count span {
  color: inherit !important;            /* Neutralize global [data-theme="light"] span rules */
  transition: color 0.25s ease-in-out;
}

/* ---------- Normal state ---------- */
[data-theme="light"] .word-counter #wordCount,
[data-theme="light"] .word-count .count {
  color: #374151 !important;            /* Default neutral gray */
}

[data-theme="light"] .word-counter #wordLimit,
[data-theme="light"] .word-count .limit {
  color: #6b7280 !important;            /* Muted gray for limit value */
}

/* ---------- Over limit: turn red ---------- */
[data-theme="light"] .word-counter.limit-exceeded #wordCount,
[data-theme="light"] .word-count.limit-exceeded .count {
  color: #b91c1c !important;            /* Red-700 (alert) */
  font-weight: 600;
}

/* ---------- Support for both Create + Edit forms ---------- */
[data-theme="light"] form.create-post .word-counter,
[data-theme="light"] form.edit-post .word-counter,
[data-theme="light"] .edit-inline-form .word-counter {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* ---------- Optional subtle spacing between numbers ---------- */
[data-theme="light"] .word-counter span,
[data-theme="light"] .word-count span {
  margin-right: 2px;
}

/* ---------- Accessibility: High Contrast users ---------- */
@media (prefers-contrast: more) {
  [data-theme="light"] .word-counter.limit-exceeded #wordCount,
  [data-theme="light"] .word-count.limit-exceeded .count {
    color: #ff0000 !important;
  }
}


/* ======================================================
   🧑‍💻 @Mention Autocomplete – Light Theme
   ====================================================== */
html[data-theme="light"] .mention-dropdown {
  background: #ffffff !important;
  color: #111827 !important;                 /* slate-900 */
  border: 1px solid #e5e7eb !important;      /* gray-200 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

/* Items inside the dropdown */
html[data-theme="light"] .mention-dropdown .mention-item {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: #111827 !important;
}

/* Text span – override the generic span rule */
html[data-theme="light"] .mention-dropdown .mention-item span {
  color: #111827 !important;
}

/* Hover state */
html[data-theme="light"] .mention-dropdown .mention-item:hover {
  background: #f3f4f6 !important;            /* gray-100 */
}


/* ======================================================
   /* Quote button (unified light/dark styling) */
   ====================================================== */
/* 🧩 Final fix: make Quote button fully transparent in light mode */
html[data-theme="light"] .quote-section .btn.open-quote,
html[data-theme="light"] .quote-section .btn.open-quote:focus,
html[data-theme="light"] .quote-section .btn.open-quote:active {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Also neutralize Bootstrap's default .btn background */
html[data-theme="light"] .quote-section .btn {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Maintain hover feedback */
html[data-theme="light"] .quote-section .btn.open-quote:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
}

/* Icon style */
html[data-theme="light"] .quote-section .btn.open-quote i {
  color: #1f6feb !important; /* bright blue tone */
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

html[data-theme="light"] .quote-section .btn.open-quote:hover i {
  opacity: 1;
  transform: scale(1.1);
}