/*
 * Sketch.Social — Dark Mode
 * Applied when: html.dark-mode
 * Activated via: localStorage key 'ss_dark' = '1'
 */

/* ═══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTY OVERRIDES
   (covers any element using var(--x) from style.css or inline)
══════════════════════════════════════════════════════════════ */
html.dark-mode {
  --bg:       #16171a;
  --card:     #22242a;
  --card-2:   #2a2c33;
  --text:     #e4e5e8;
  --text2:    #8a8f9c;
  --text3:    #666b78;
  --border:   #383b44;
  --accent:   #7c7cff;
  --nav-bg:   #1d1f25;
  --r-sm:     8px;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL ELEMENTS
══════════════════════════════════════════════════════════════ */
html.dark-mode body {
  background-color: #16171a !important;
  color: #e4e5e8 !important;
}

html.dark-mode a { color: #9898ff; }

html.dark-mode ::placeholder { color: #555b6a !important; }

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: #2a2c33 !important;
  color: #e4e5e8 !important;
  border-color: #383b44 !important;
}
html.dark-mode input:focus,
html.dark-mode textarea:focus {
  border-color: #7c7cff !important;
  box-shadow: 0 0 0 3px rgba(124,124,255,.15) !important;
}

html.dark-mode button:not(.nav-tab):not(.draw-btn):not(.postBtn):not(.btn-save):not(.remix-cta-btn):not(.profile-follow-btn.following):not(#postSketchBtn) {
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
html.dark-mode nav {
  background: #1d1f25 !important;
  border-bottom-color: #383b44 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.4) !important;
}
html.dark-mode .nav-logo-text { color: #e4e5e8 !important; }
html.dark-mode .nav-tab {
  color: #8a8f9c !important;
}
html.dark-mode .nav-tab.active {
  background: #7c7cff !important;
  color: #fff !important;
}
html.dark-mode .nav-tab:hover { background: rgba(255,255,255,.08) !important; }
html.dark-mode .draw-btn { background: #3a3c44 !important; color: #e4e5e8 !important; }
html.dark-mode .draw-btn:hover { background: #484b57 !important; }
html.dark-mode .nav-tabs { background: #2a2c33 !important; border-color: #383b44 !important; }
html.dark-mode .dropdown-menu {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}
html.dark-mode .dropdown-item { color: #c8cad2 !important; }
html.dark-mode .dropdown-item:hover { background: rgba(255,255,255,.08) !important; color: #e4e5e8 !important; }
html.dark-mode .dropdown-item.danger { color: #ff7070 !important; }

/* ═══════════════════════════════════════════════════════════════
   MAIN FEED (sketch-social-complete.html)
══════════════════════════════════════════════════════════════ */
html.dark-mode .feed-container { background: transparent; }
html.dark-mode .feed-sidebar {
  background: #22242a !important;
  border-color: #383b44 !important;
}
html.dark-mode .sketch-card {
  background: #22242a !important;
  border-color: #383b44 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
html.dark-mode .sketch-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; }
html.dark-mode .sketch-info { border-top-color: #383b44 !important; }
html.dark-mode .sketch-caption { color: #b0b5c4 !important; }
html.dark-mode .sketch-username { color: #9898ff !important; }
html.dark-mode .sketch-meta { color: #666b78 !important; }
html.dark-mode .gallery-header,
html.dark-mode .feed-header { border-bottom-color: #383b44 !important; }
html.dark-mode .feed-title { color: #e4e5e8 !important; }

/* ═══════════════════════════════════════════════════════════════
   THREAD PAGE
══════════════════════════════════════════════════════════════ */
html.dark-mode .thread-wrap { background: transparent; }
html.dark-mode .post-card {
  background: #22242a !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}
html.dark-mode .post-body { background: #22242a !important; }
html.dark-mode .post-image-wrap { background: #1a1b1f !important; }
html.dark-mode .post-username { color: #9898ff !important; }
html.dark-mode .post-date { color: #666b78 !important; }
html.dark-mode .post-caption { color: #b0b5c4 !important; }
html.dark-mode .post-actions { border-top-color: #383b44 !important; background: #1e2026 !important; }
html.dark-mode .vote-btn { color: #8a8f9c !important; }
html.dark-mode .vote-btn:hover { background: rgba(255,255,255,.08) !important; }
html.dark-mode .remix-btn {
  background: rgba(124,124,255,.15) !important;
  color: #9898ff !important;
  border-color: rgba(124,124,255,.3) !important;
}
html.dark-mode .remix-btn:hover { background: rgba(124,124,255,.25) !important; }
html.dark-mode .back-btn {
  background: #2a2c33 !important;
  color: #b0b5c4 !important;
  border-color: #383b44 !important;
}
html.dark-mode .chain-connector { background: #383b44 !important; }
html.dark-mode .thread-label { color: #666b78 !important; }
html.dark-mode .locked-badge {
  background: rgba(255,200,100,.15) !important;
  color: #f0b86a !important;
}
html.dark-mode .empty-thread { color: #8a8f9c !important; }
html.dark-mode .remix-cta {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════════════════════════════ */
html.dark-mode .profile-banner { background: #22242a !important; }
html.dark-mode .profile-name { color: #e4e5e8 !important; }
html.dark-mode .profile-username { color: #8a8f9c !important; }
html.dark-mode .profile-bio { color: #b0b5c4 !important; }
html.dark-mode .profile-stats-bar { background: #1d1f25 !important; border-bottom-color: #383b44 !important; }
html.dark-mode .stat-tab { color: #8a8f9c !important; }
html.dark-mode .stat-tab:hover { background: rgba(255,255,255,.06) !important; color: #e4e5e8 !important; }
html.dark-mode .stat-tab.active { border-bottom-color: #7c7cff !important; color: #7c7cff !important; }
html.dark-mode .stat-val { color: #e4e5e8 !important; }
html.dark-mode .posts-wrap { background: #16171a !important; }
html.dark-mode .grid-card, html.dark-mode .profile-grid-card {
  background: #22242a !important;
  border-color: #383b44 !important;
}
html.dark-mode .vtog-btn {
  background: #2a2c33 !important;
  color: #8a8f9c !important;
  border-color: #383b44 !important;
}
html.dark-mode .vtog-btn.active {
  background: #3a3c44 !important;
  color: #e4e5e8 !important;
}
html.dark-mode .profile-follow-btn {
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════════════════════════════════ */
html.dark-mode .settings-page { background: #16171a !important; }
html.dark-mode .settings-card {
  background: #22242a !important;
  border-color: #383b44 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
html.dark-mode .settings-heading { color: #e4e5e8 !important; }
html.dark-mode .settings-subheading { color: #8a8f9c !important; }
html.dark-mode .card-section-title { color: #e4e5e8 !important; border-bottom-color: #383b44 !important; }
html.dark-mode .card-row { border-bottom-color: #2e3038 !important; }
html.dark-mode .card-row-label { color: #8a8f9c !important; }
html.dark-mode .settings-input,
html.dark-mode .settings-textarea {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
  color: #e4e5e8 !important;
}
html.dark-mode .input-hint { color: #666b78 !important; }
html.dark-mode .save-bar { border-top-color: #383b44 !important; }
html.dark-mode .danger-zone { border-color: #6b3030 !important; background: #1e1717 !important; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════════ */
html.dark-mode .about-card {
  background: #22242a !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
}
html.dark-mode .about-card p { color: #c0c4d0 !important; }
html.dark-mode .about-card h2 { color: #e4e5e8 !important; }
html.dark-mode .quote-block { background: rgba(124,124,255,.08) !important; }
html.dark-mode .quote-block p { color: #9898ff !important; }
html.dark-mode .faq-item {
  background: #22242a !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.3) !important;
}
html.dark-mode .faq-question { color: #e4e5e8 !important; }
html.dark-mode .faq-answer p { color: #8a8f9c !important; border-top-color: #383b44 !important; }
html.dark-mode .about-footer { color: #555b6a !important; }

/* ═══════════════════════════════════════════════════════════════
   DRAWING PAGE
══════════════════════════════════════════════════════════════ */
html.dark-mode .leftColumn,
html.dark-mode .toolbox,
html.dark-mode .layersPanel {
  background: #22242a !important;
}
html.dark-mode .tool {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
}
html.dark-mode .tool:hover, html.dark-mode .tool.active {
  background: #3a3c44 !important;
  border-color: #7c7cff !important;
}
html.dark-mode .layerItem { background: #2a2c33 !important; border-color: #3a3c44 !important; }
html.dark-mode .layerItem.active { outline-color: #7c7cff !important; }
html.dark-mode .layerHeader { color: #8a8f9c !important; }
html.dark-mode .layerBtn { background: #383b44 !important; color: #c0c4d0 !important; }
html.dark-mode .paletteColumn { background: #22242a !important; }
html.dark-mode .stageHeader,
html.dark-mode .saveRow,
html.dark-mode #saveRowGlobal { background: #1d1f25 !important; border-color: #383b44 !important; }
html.dark-mode #captionInput {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
  color: #e4e5e8 !important;
}
html.dark-mode #saveCanvasBtn {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
  color: #e4e5e8 !important;
}
html.dark-mode #lockToggle {
  background: #2a2c33 !important;
  border-color: #383b44 !important;
  color: #8a8f9c !important;
}
html.dark-mode #lockPost:checked + #lockToggle {
  background: rgba(124,124,255,.2) !important;
  border-color: #7c7cff !important;
  color: #9898ff !important;
}
html.dark-mode #lockPost:checked + #lockToggle #lockSwitch { background: #7c7cff !important; }

/* ═══════════════════════════════════════════════════════════════
   MODALS & OVERLAYS
══════════════════════════════════════════════════════════════ */
html.dark-mode .modal-backdrop,
html.dark-mode #reportBackdrop > div,
html.dark-mode #timeoutBackdrop > div,
html.dark-mode #clearConfirmBackdrop > div,
html.dark-mode #timeoutBlockBackdrop > div,
html.dark-mode #imgModalBackdrop > div {
  background: #22242a !important;
  color: #e4e5e8 !important;
}
html.dark-mode #reportBackdrop > div h2,
html.dark-mode #timeoutBackdrop > div h2,
html.dark-mode #clearConfirmBackdrop > div h2 { color: #e4e5e8 !important; }
html.dark-mode #reportBackdrop > div p,
html.dark-mode #clearConfirmBackdrop > div p { color: #8a8f9c !important; }

/* Notification panel */
html.dark-mode .notif-panel {
  background: #22242a !important;
  border-color: #383b44 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}
html.dark-mode .notif-item { border-bottom-color: #2e3038 !important; }
html.dark-mode .notif-item:hover { background: rgba(255,255,255,.05) !important; }
html.dark-mode .notif-text { color: #c0c4d0 !important; }
html.dark-mode .notif-time { color: #666b78 !important; }
html.dark-mode .notif-panel-header { color: #8a8f9c !important; border-bottom-color: #383b44 !important; }

/* Scrollbars */
html.dark-mode * {
  scrollbar-color: #383b44 #22242a;
}
html.dark-mode *::-webkit-scrollbar-track { background: #22242a; }
html.dark-mode *::-webkit-scrollbar-thumb { background: #383b44; border-radius: 4px; }


/* ═══════════════════════════════════════════════════════════════
   BRAND ACCENTS — Pink & Blue (applies in both light & dark mode)
   Subtle gradient touches that reinforce the site's colour identity
   without distracting from the artwork.
══════════════════════════════════════════════════════════════ */

/* ── Draw button: pink → blue gradient ── */
.draw-btn {
  background: linear-gradient(120deg, #c97fd6 0%, #6b6bff 100%) !important;
  color: #fff !important;
}
.draw-btn:hover {
  background: linear-gradient(120deg, #b86ec7 0%, #5a5aee 100%) !important;
  opacity: 1 !important;
}

/* ── Post Sketch button: matching gradient ── */
.postBtn,
#postSketchBtn {
  background: linear-gradient(120deg, #c97fd6 0%, #6b6bff 100%) !important;
  color: #fff !important;
}
.postBtn:hover,
#postSketchBtn:hover {
  background: linear-gradient(120deg, #b86ec7 0%, #5a5aee 100%) !important;
}

/* ── Active nav tab: gradient pill ── */
.nav-tab.active {
  background: linear-gradient(120deg, #d4a0e0 0%, #7c7cff 100%) !important;
  color: #fff !important;
}

/* ── Sketch.Social logo dot: gradient-ish glow ── */
.nav-logo-text em {
  background: linear-gradient(120deg, #d48fdc, #6b6bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Sketch cards: pink-blue left-edge accent on hover ── */
.sketch-card {
  border-left: 3px solid transparent !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.sketch-card:hover {
  border-left-color: #c97fd6 !important;
}

/* ── Thread connector: gradient dot ── */
.chain-connector {
  background: linear-gradient(to bottom, #c97fd6, #6b6bff) !important;
}

/* ── Profile stats active tab underline ── */
.stat-tab.active {
  border-bottom-color: #c97fd6 !important;
  color: #c97fd6 !important;
}

/* ── Remix button: pink tint ── */
.remix-btn {
  border-color: rgba(201,127,214,.4) !important;
  color: #b06fc0 !important;
}
.remix-btn:hover {
  background: rgba(201,127,214,.12) !important;
  border-color: rgba(201,127,214,.7) !important;
}

/* ── Remix CTA button: gradient ── */
.remix-cta-btn {
  background: linear-gradient(120deg, #c97fd6 0%, #6b6bff 100%) !important;
  border: none !important;
}
.remix-cta-btn:hover {
  background: linear-gradient(120deg, #b86ec7 0%, #5a5aee 100%) !important;
}

/* ── Save button in settings: gradient ── */
.btn-save {
  background: linear-gradient(120deg, #c97fd6 0%, #6b6bff 100%) !important;
  border: none !important;
  color: #fff !important;
}
.btn-save:hover {
  background: linear-gradient(120deg, #b86ec7 0%, #5a5aee 100%) !important;
}

/* ── About page hero: keep gradient but boost pink ── */
.hero {
  background: linear-gradient(135deg, #d490cc 0%, #8ab4f8 100%) !important;
}

/* ── Input focus ring: pink-blue blend ── */
input:focus,
textarea:focus {
  border-color: #c97fd6 !important;
  box-shadow: 0 0 0 3px rgba(201,127,214,.2) !important;
  outline: none !important;
}

/* ── Notification badge: gradient stays pink→blue (already was) ── */

/* ── Dark mode specific accent overrides ── */
html.dark-mode .draw-btn {
  background: linear-gradient(120deg, #9c5aaa 0%, #5858e0 100%) !important;
}
html.dark-mode .draw-btn:hover {
  background: linear-gradient(120deg, #a962b8 0%, #6060ef 100%) !important;
}
html.dark-mode .postBtn,
html.dark-mode #postSketchBtn {
  background: linear-gradient(120deg, #9c5aaa 0%, #5858e0 100%) !important;
}
html.dark-mode .nav-tab.active {
  background: linear-gradient(120deg, #8a4a98 0%, #5858e0 100%) !important;
}
html.dark-mode .sketch-card:hover { border-left-color: #9c5aaa !important; }
html.dark-mode .stat-tab.active   { border-bottom-color: #c97fd6 !important; color: #d4a0e4 !important; }
html.dark-mode .remix-btn         { color: #c97fd6 !important; border-color: rgba(201,127,214,.35) !important; }
html.dark-mode .remix-btn:hover   { background: rgba(201,127,214,.15) !important; }
html.dark-mode .btn-save          { background: linear-gradient(120deg, #9c5aaa 0%, #5858e0 100%) !important; }
html.dark-mode input:focus,
html.dark-mode textarea:focus     { border-color: #c97fd6 !important; box-shadow: 0 0 0 3px rgba(201,127,214,.15) !important; }


/* ═══════════════════════════════════════════════════════════════
   DARK MODE FIX — Grid/Feed view toggle buttons
══════════════════════════════════════════════════════════════ */
html.dark-mode .view-btn { color: #8a8f9c !important; }
html.dark-mode .view-btn:hover {
  background: rgba(201,127,214,.18) !important;
  color: #d4a0e4 !important;
}
html.dark-mode .view-btn.active {
  background: rgba(124,124,255,.22) !important;
  color: #9898ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   BRAND ACCENTS — Thread Page
══════════════════════════════════════════════════════════════ */
/* Back button — pink left border */
.back-btn {
  border-left: 3px solid #c97fd6 !important;
  border-radius: 0 6px 6px 0 !important;
}
.back-btn:hover { background: rgba(201,127,214,.1) !important; }

/* Post card — subtle pink top stripe on the active / root post */
.post-card.original-post {
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(to right, #c97fd6, #6b6bff) 1 !important;
}

/* Thread label (reply count header) */
.thread-label {
  background: linear-gradient(120deg, rgba(201,127,214,.12), rgba(107,107,255,.12)) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  color: #9060a0 !important;
  font-weight: 600 !important;
}
html.dark-mode .thread-label { color: #c4a0d4 !important; }

/* Remix CTA box — gradient border */
.remix-cta {
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
  border-image: linear-gradient(to right, #c97fd6, #6b6bff) 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BRAND ACCENTS — Profile Page
══════════════════════════════════════════════════════════════ */
/* Profile banner uses uploaded image or solid --banner color */

/* Follow button: pink-blue gradient (not mod action buttons) */
.profile-follow-btn:not(.mod-action-btn) {
  background: linear-gradient(120deg, #c97fd6, #6b6bff) !important;
  border: none !important;
  color: #fff !important;
}
.profile-follow-btn:not(.mod-action-btn):hover {
  background: linear-gradient(120deg, #b86ec7, #5a5aee) !important;
  opacity: .95 !important;
}
.profile-follow-btn.following:not(.mod-action-btn) {
  background: rgba(201,127,214,.15) !important;
  border: 1.5px solid #c97fd6 !important;
  color: #a060b0 !important;
}
html.dark-mode .profile-follow-btn.following:not(.mod-action-btn) {
  background: rgba(201,127,214,.15) !important;
  color: #d4a0e4 !important;
}

/* Grid card hover — pink accent */
.profile-grid-item:hover,
.sketch-card:hover img { opacity: .9 !important; }

/* ═══════════════════════════════════════════════════════════════
   BRAND ACCENTS — About Page
══════════════════════════════════════════════════════════════ */
/* FAQ chevron: gradient background */
.faq-chevron {
  background: linear-gradient(135deg, #d490cc, #7c7cff) !important;
}

/* About card headings: pink-blue gradient underline */
.about-card h2::after {
  content: '';
  display: block;
  height: 3px;
  width: 48px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(to right, #c97fd6, #6b6bff);
}

/* Section eyebrow (already gradient inline, reinforce) */
.section-eyebrow {
  background: linear-gradient(120deg, #c97fd6, #6b6bff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════════
   BRAND ACCENTS — Settings Page
══════════════════════════════════════════════════════════════ */
/* Card section title: pink-blue left border */
.card-section-title {
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(to right, #c97fd6, #6b6bff, transparent) 1 !important;
  padding-bottom: 10px !important;
  margin-bottom: 2px !important;
}

/* Avatar upload button — only tinted in dark mode, neutral in light */
html.dark-mode .avatar-upload-btn {
  border-color: #c97fd6 !important;
  color: #d4a0e4 !important;
}
html.dark-mode .avatar-upload-btn:hover {
  background: rgba(201,127,214,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BRAND ACCENTS — Drawing Page
══════════════════════════════════════════════════════════════ */
/* Active tool button: pink-blue gradient border */
.tool.active {
  border-color: #c97fd6 !important;
  background: rgba(201,127,214,.1) !important;
  box-shadow: 0 0 0 2px rgba(201,127,214,.3) !important;
}

/* Lock toggle checked: gradient */
#lockPost:checked + #lockToggle {
  background: linear-gradient(120deg, rgba(201,127,214,.2), rgba(107,107,255,.2)) !important;
  border-color: #c97fd6 !important;
  color: #8850a0 !important;
}
#lockPost:checked + #lockToggle #lockSwitch {
  background: linear-gradient(to right, #c97fd6, #6b6bff) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — view toggle accent (light mode)
══════════════════════════════════════════════════════════════ */
.view-btn.active {
  background: linear-gradient(120deg, rgba(201,127,214,.18), rgba(107,107,255,.18)) !important;
  color: #6b6bff !important;
}
.view-btn:hover {
  background: rgba(201,127,214,.1) !important;
  color: #a060b0 !important;
}

/* ── Mod action buttons — always red, never pink/blue ── */
.mod-action-btn {
  background: rgba(224,48,48,.1) !important;
  border: 1.5px solid rgba(224,48,48,.4) !important;
  color: #c83030 !important;
}
.mod-action-btn:hover {
  background: rgba(224,48,48,.2) !important;
  border-color: rgba(224,48,48,.65) !important;
}
html.dark-mode .mod-action-btn {
  background: rgba(224,48,48,.15) !important;
  border-color: rgba(255,80,80,.45) !important;
  color: #ff6060 !important;
}
html.dark-mode .mod-action-btn:hover {
  background: rgba(224,48,48,.25) !important;
  border-color: rgba(255,80,80,.7) !important;
}

/* ── Settings save bar backgrounds (were hardcoded #fafafa) ── */
html.dark-mode .save-bar {
  background: #1e2026 !important;
  border-top-color: #383b44 !important;
}