/* =========================
   Dark Mode Background Texture
========================= */
body.theme-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: url("../images/background_tile_dark.png");
  background-repeat: repeat;
  background-size: 320px 320px;

  opacity: 0.40;
  filter: none;
}
/* =========================
   Dark Mode – Main Content Area
========================= */
body.theme-dark .content {
  background: var(--paper-1);
  color: var(--ink-main);
}
/* =========================
   Dark Mode – Inner Content Panels
========================= */
body.theme-dark .panel,
body.theme-dark .cozy-card,
body.theme-dark .content-inner > div:not(.forum-page):not(.forum-thread-page):not(.world-page):not(.market-square-page) {
  background: var(--paper-2);
  border-color: var(--border-soft);
}

/* =========================
   Dark Mode – Tables
========================= */
body.theme-dark table {
  background: transparent;
}

body.theme-dark thead {
  background: var(--bark);
  color: #f2efe6;
}

body.theme-dark tbody tr {
  background: var(--paper-1);
}

body.theme-dark tbody tr:nth-child(even) {
  background: var(--paper-2);
}
/* =========================
   Dark Mode – Sidebar (Main)
========================= */
body.theme-dark .sidebar {
  background: #0f1513;               /* deep forest */
  border-right: 1px solid var(--border-soft);
  color: var(--ink-main);
}

/* Sidebar cards */
body.theme-dark .sidebar .cozy-card,
body.theme-dark .sidebar-section,
body.theme-dark .sidebar-exploration-buddy {
  background: #141c19;
  border-color: rgba(255,255,255,0.08);
}

/* Sidebar headings / labels */
body.theme-dark .sidebar .section-title,
body.theme-dark .sidebar h4 {
  color: var(--ink-muted);
}

/* Sidebar text + links */
body.theme-dark .sidebar,
body.theme-dark .sidebar a {
  color: var(--ink-main);
}

body.theme-dark .sidebar a:hover {
  color: var(--accent-soft);
}
/* =========================
   Dark Mode – Top Navigation
========================= */

/* Main tabs */
body.theme-dark .top-nav .tab > a {
  background: #1b2522;
  border-color: #1b2522;
  color: #e7ece9;
}

body.theme-dark .top-nav .tab > a:hover {
  background: #24302c;
  border-color: #24302c;
}

/* Dropdown panel */
body.theme-dark .top-nav li > ul {
  background: #141c19;
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.45);
}

/* Dropdown links */
body.theme-dark .top-nav li > ul li a {
  color: var(--ink-main);
}

body.theme-dark .top-nav li > ul li a:hover {
  background: #1f2925;
}
/* =========================
   Dark Mode – Content Frame Refinement
========================= */
body.theme-dark .content {
  border-left: 1px solid rgba(255,255,255,0.05);
}

body.theme-dark .content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.04);
}
/* =========================
   Dark Mode – Sidebar Frame
========================= */
body.theme-dark .sidebar {
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Sidebar inner rhythm */
body.theme-dark .sidebar-divider {
  background: rgba(255,255,255,0.08);
}
/* =========================
   Dark Mode – Sidebar Background Override
   (Overrides light-mode !important fiber texture)
========================= */
body.theme-dark aside.sidebar {
  background: #0f1513 !important;
}
/* =========================
   Dark Mode – Help Page Content Stabilization
   (Preserve CSS containment)
========================= */
body.theme-dark .content {
  color: var(--ink-main);
}

body.theme-dark .content h1,
body.theme-dark .content h2,
body.theme-dark .content h3,
body.theme-dark .content h4 {
  color: var(--ink-main);
}

/* Help text blocks */
body.theme-dark .content p,
body.theme-dark .content li,
body.theme-dark .content td,
body.theme-dark .content th {
  color: var(--ink-main);
}
/* =========================
   Dark Mode – Help Tables
========================= */
body.theme-dark .content table {
  background: transparent;
}

body.theme-dark .content thead {
  background: var(--bark);
  color: #f2efe6;
}

body.theme-dark .content tbody tr {
  background: var(--paper-1);
}

body.theme-dark .content tbody tr:nth-child(even) {
  background: var(--paper-2);
}
/* =========================
   Help Notes – Dark Mode Fix
========================= */

body.theme-dark .help-panel .note {
  background: rgba(255, 255, 255, 0.04); /* subtle, not glowing */
  border-left: 4px solid var(--moss);
  color: var(--ink-main);
}
/* =========================
   News Posts – Dark Mode Fix
========================= */

body.theme-dark .news-post {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-soft);
  color: var(--ink-main);
}
body.theme-dark .news-post-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* =========================
   News – Dark Mode Inner Panels
========================= */

body.theme-dark .news-post-header,
body.theme-dark .news-post-body,
body.theme-dark .news-post-footer {
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink-main);
}

body.theme-dark .news-post-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* =========================
   News – Dark Mode BBCode Reset
========================= */

body.theme-dark .news-post-body p,
body.theme-dark .news-post-body blockquote,
body.theme-dark .news-post-body pre,
body.theme-dark .news-post-body code,
body.theme-dark .news-post-body hr {
  background: transparent;
  color: var(--ink-main);
}
body.theme-dark .news-post-body blockquote {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(255, 255, 255, 0.12);
}
/* =========================
   News Posts – Dark Mode Override
   Overrides forum.css !important rules
========================= */

body.theme-dark .forum-news-page .news-post {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--ink-main);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

body.theme-dark .news-post-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
}

body.theme-dark .news-post h2,
body.theme-dark .news-post h3 {
  color: var(--ink-strong);
}
/* =========================
   News – Like Button (Dark Mode)
========================= */

body.theme-dark .news-post-actions button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-main);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

body.theme-dark .news-post-actions button:hover {
  background: rgba(255, 255, 255, 0.14);
}

body.theme-dark .news-post-actions button.liked,
body.theme-dark .news-post-actions button.active {
  background: rgba(120, 170, 120, 0.25);
  border-color: rgba(120, 170, 120, 0.45);
  color: var(--ink-strong);
}
/* =========================
   News – Like Button (Dark Mode)
========================= */
body.theme-dark .news-like-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--ink-main) !important;
}
/* =========================
   Forum Index – Category Cards (Dark Mode)
========================= */

body.theme-dark .forum-card {
  background: var(--paper-1) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--ink-main);
}

body.theme-dark .forum-card:hover {
  background: var(--paper-2) !important;
}
/* =========================
   Forum Action Buttons – Dark Mode
   (+ New Thread / My Activity)
========================= */

body.theme-dark .forum-actions-bar a,
body.theme-dark .forum-action-link {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--ink-main) !important;
}

body.theme-dark .forum-actions-bar a:hover,
body.theme-dark .forum-action-link:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
/* =========================
   Forum Thread – Post Cards (Dark Mode)
   HARD OVERRIDE (beats forum.css soft-tone block)
========================= */

body.theme-dark .forum-post {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--ink-main) !important;
}

body.theme-dark .forum-post + .forum-post {
  margin-top: 16px;
}

/* OP highlight */
body.theme-dark .forum-post-op {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: var(--border-soft) !important;
}

/* =========================
   Forum Thread – Post Card Internals (Dark Mode)
========================= */

/* Author column */
body.theme-dark .forum-post-author {
  background: transparent !important;
  color: var(--ink-muted) !important;
}

/* Header (author + timestamp) */
body.theme-dark .forum-post-header {
  background: transparent !important;
  color: var(--ink-muted) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

body.theme-dark .forum-post-header a {
  color: var(--ink-main) !important;
}

/* Body */
body.theme-dark .forum-post-content,
body.theme-dark .forum-post-body {
  background: transparent !important;
  color: var(--ink-main) !important;
}

/* Edited note */
body.theme-dark .forum-post-edited {
  color: var(--ink-muted) !important;
}

/* =========================
   Quotes / Code (Dark Mode)
========================= */

body.theme-dark .forum-post blockquote {
  background: rgba(255,255,255,0.04) !important;
  border-left: 3px solid rgba(255,255,255,0.18) !important;
  color: var(--ink-main) !important;
}

body.theme-dark .forum-post pre,
body.theme-dark .forum-post code {
  background: rgba(0,0,0,0.4) !important;
  color: var(--ink-main) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================
   Thread Page Containers
========================= */

body.theme-dark .forum-page,
body.theme-dark .forum-thread-page,
body.theme-dark .forum-thread-page > * {
  background: transparent !important;
  border: none !important;
}

body.theme-dark .content-inner > .forum-page,
body.theme-dark .content-inner > .forum-page > * {
  background: transparent !important;
  border: none !important;
}

/* =========================
   Reply Area (Dark Mode)
========================= */

body.theme-dark .forum-reply-area {
  background: transparent !important;
}

body.theme-dark .forum-reply-area form {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--border-soft) !important;
}

/* =========================
   Non-forum panels nearby
   (prevents light bleed)
========================= */

body.theme-dark .panel,
body.theme-dark .cozy-card,
body.theme-dark .content-inner > div:not(.forum-page) {
  background: var(--paper-2) !important;
  border-color: var(--border-soft) !important;
}
/* =========================
   Forum Thread – FINAL Dark Fixes
   (Targets remaining forum.css leaks)
========================= */

/* Post content wrapper (THIS was missing) */
body.theme-dark .forum-post-content {
  background: transparent !important;
  color: var(--ink-main) !important;
}

/* Breadcrumbs + meta */
body.theme-dark .forum-breadcrumbs,
body.theme-dark .forum-breadcrumbs a,
body.theme-dark .forum-post-date,
body.theme-dark .forum-post-edited {
  color: var(--ink-muted) !important;
}

/* =========================
   BBCode Editor (Thread Reply)
========================= */

body.theme-dark textarea.forum-editor {
  background: rgba(0,0,0,0.35) !important;
  color: var(--ink-main) !important;
  border: 1px solid var(--border-soft) !important;
}

body.theme-dark .forum-editor-toolbar {
  background: rgba(0,0,0,0.45) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

body.theme-dark .forum-editor-toolbar button,
body.theme-dark .forum-editor-toolbar select {
  background: rgba(255,255,255,0.08) !important;
  color: var(--ink-main) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

body.theme-dark .forum-editor-toolbar button:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* =========================
   Thread Action Pills
========================= */

body.theme-dark .forum-action-link,
body.theme-dark .forum-post-mod-toggle,
body.theme-dark .forum-mod-toggle {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--ink-main) !important;
}

body.theme-dark .forum-action-link:hover,
body.theme-dark .forum-post-mod-toggle:hover,
body.theme-dark .forum-mod-toggle:hover {
  background: rgba(255,255,255,0.16) !important;
}
/* =========================================
   Location Hubs — Dark Mode Override
   (World / Bazaar / Social)
========================================= */

body.theme-dark .world-page h1,
body.theme-dark .market-square-page h1 {
  color: var(--ink-main);
}

body.theme-dark .world-page .muted,
body.theme-dark .market-square-page .muted {
  color: var(--ink-muted);
}

/* ===============================
   Location Cards
=============================== */

body.theme-dark .world-location,
body.theme-dark .market-location {
  background: var(--paper-1);
  border: 1px solid var(--border-soft);
  color: var(--ink-main);

  /* cancel light hover feel */
  box-shadow: none;
}

/* Headings */
body.theme-dark .world-location h3,
body.theme-dark .market-location h3 {
  color: var(--ink-main);
}

/* Descriptions */
body.theme-dark .world-location p,
body.theme-dark .market-location p {
  color: var(--ink-muted);
}

/* Hover lift (keep motion, darken instead of brighten) */
body.theme-dark .world-location:not(.locked):hover,
body.theme-dark .market-location:hover {
  background: var(--paper-2);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}

/* ===============================
   Location Links
=============================== */

body.theme-dark .world-link,
body.theme-dark .market-link {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ink-main);
}

body.theme-dark .world-link:hover,
body.theme-dark .market-link:hover {
  background: rgba(255,255,255,0.14);
  color: var(--ink-strong);
  text-decoration: none;
  transform: scale(1.05);
}

/* ===============================
   Locked States
=============================== */

body.theme-dark .world-location.locked {
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.08);
  opacity: 0.75;
}

body.theme-dark .world-link.disabled {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--ink-muted);
  cursor: not-allowed;
}
/* World / Bazaar pages should NOT paint the full content slab */
body.theme-dark .world-page,
body.theme-dark .market-square-page {
  background: transparent;
}

body.theme-dark .world-page .content,
body.theme-dark .market-square-page .content {
  background: transparent;
}
body.theme-dark .content-inner > div:not(.panel):not(.cozy-card):not(.forum-card):not(.forum-post):not(.news-post) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* =========================
   News – Kill Light Backgrounds (Dark Mode)
========================= */

body.theme-dark .news-post-header,
body.theme-dark .news-post-body,
body.theme-dark .news-post-footer {
  background: transparent !important;
}

/* Re-apply dark card surface cleanly */
body.theme-dark .news-post {
  background: var(--paper-1) !important;
  border: 1px solid var(--border-soft) !important;
}
/* =========================================================
   SHOP / MARKET — DARK MODE
   SINGLE SOURCE OF TRUTH
========================================================= */

body.theme-dark {

  /* =========================
     SHOP CARDS
  ========================= */
  .shop-card {
    background: var(--paper-2);
    border: 1px solid var(--border-soft);
  }

  .shop-item-image {
    background: var(--paper-3);
    border: 1px solid var(--border-soft);
  }

  /* =========================
     TEXT
  ========================= */
  .shop-item-name,
  .shop-price,
  .price {
    color: var(--ink-main);
  }

  .shop-meta-row,
  .shop-stock {
    color: var(--ink-muted);
  }

  .shop-stock.in-stock {
    color: var(--ink-muted);
  }

  .shop-stock.out-of-stock {
    color: var(--ink-muted);
    font-style: italic;
  }

  /* =========================
     TOOLTIP
  ========================= */
  .shop-tooltip {
    background: var(--paper-2);
    border: 1px solid var(--border-soft);
    color: var(--ink-main);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  }

  .shop-tooltip strong {
    color: var(--ink-main);
  }

  .shop-tooltip p,
  .shop-tooltip .tooltip-meta {
    color: var(--ink-muted);
  }

  /* =========================
     QTY STEPPER
  ========================= */
  .qty-stepper {
    background: var(--paper-3);
    border: 1px solid var(--border-soft);
  }

  .qty-stepper button {
    background: var(--btn-surface);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
  }

  .qty-stepper button:hover {
    background: var(--btn-surface-hover);
  }

  .shop-qty {
    color: var(--ink-main);
  }

  /* =========================
     SHOP BUTTONS — NEUTRAL
  ========================= */
  .shop-button {
    background: var(--btn-surface);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-sm);
    font-weight: 600;

    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: background-color .15s ease;
  }

  .shop-button:hover {
    background: var(--btn-surface-hover);
  }

  .shop-button[disabled] {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--border-soft);
    box-shadow: none;
    cursor: default;
  }

  /* =========================
     PRIMARY ACTIONS
     (Add to cart / Checkout)
  ========================= */
  .shop-button.add-to-cart,
  .cart-checkout {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;

    box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  }

  .shop-button.add-to-cart:hover,
  .cart-checkout:hover {
    background: var(--btn-primary-hover);
  }

  .cart-checkout[disabled] {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    box-shadow: none;
  }

  /* =========================
     DESKTOP CART (SIDEBAR)
  ========================= */
  .sidebar .shop-cart {
    background: var(--paper-2);
    border: 1px solid var(--border-soft);
    color: var(--ink-main);
  }

  .sidebar .cart-items {
    background: var(--paper-3);
    border: 1px solid var(--border-soft);
  }

  .sidebar .cart-item {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-soft);
  }

  .sidebar .cart-item-name {
    color: var(--ink-main);
  }

  .sidebar .cart-item-qty,
  .sidebar .cart-meta {
    color: var(--ink-muted);
  }

  .sidebar .cart-summary {
    border-top: 1px solid var(--border-soft);
  }

  .sidebar .cart-total {
    color: var(--ink-main);
  }

  .sidebar .cart-item-remove {
    color: var(--ink-muted);
  }

  .sidebar .cart-item-remove:hover {
    color: var(--ink-main);
  }

  /* =========================
     MOBILE CART
  ========================= */
  .mobile-cart-sheet {
    background: var(--paper-2);
    box-shadow: 0 -12px 30px rgba(0,0,0,0.5);
  }

  .mobile-cart-handle {
    background: rgba(255,255,255,0.35);
  }
}
body.theme-dark .mobile-cart-fab,
body.theme-dark .cart-hud-button,
body.theme-dark .shop-cart-fab,
body.theme-dark .view-basket {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-lg);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.15);

  font-weight: 600;
}

body.theme-dark .mobile-cart-fab:hover,
body.theme-dark .cart-hud-button:hover,
body.theme-dark .shop-cart-fab:hover,
body.theme-dark .view-basket:hover {
  background: var(--btn-primary-hover);
}

body.theme-dark .mobile-cart-fab[disabled],
body.theme-dark .cart-hud-button[disabled] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--border-soft);
  box-shadow: none;
}