/* =============================================
   DARK MODE
   Mirrors the wiki's dark-mode palette.
   Toggled by adding body.dark-mode class.
   ============================================= */
body.dark-mode {
    --bg-page:       #1a1612;
    --bg-content:    #2a2218;
    --bg-panel:      #302618;
    --bg-title:      linear-gradient(to bottom, #5a4830 0%, #4a3a25 100%);
    --bg-title-hover:linear-gradient(to bottom, #6a5840 0%, #5a4830 100%);
    --bg-highlight:  #3d3225;
    --bg-input:      #2a2218;

    --border-light:  #4a3d30;
    --border-mid:    #5a4830;
    --border-dark:   #1a1612;
    --border-accent: #6a5840;
    --border-outer:  #4a3d30;

    --text-primary:  #e8dcc8;
    --text-secondary:#e8dcc8;
    --text-muted:    #a89878;
    --text-link:     #d4a055;
    --text-link-hover:#e8b465;

    --shadow-box: 1px 2px 3px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-title: inset 0 2px 0 rgba(255,255,255,.1), inset 2px 0 0 rgba(255,255,255,.06),
                    inset 0 0 0 2px rgba(255,255,255,.03), inset 0 -1px 2px rgba(0,0,0,.3);

    --rarity-Common:    #999;
    --rarity-Uncommon:  #4aba4a;
    --rarity-Rare:      #5a9ad8;
    --rarity-Epic:      #ab7ce4;
    --rarity-Legendary: #e8a830;
    --rarity-Celestial: #e85555;
}

/* Search bar adjustments */
body.dark-mode .search-bar-wrap input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

/* Landing title text shadow */
body.dark-mode .landing-title {
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

/* Table header border tweaks for dark mode */
body.dark-mode #items-table thead th {
    border-top-color: #6a5840;
    border-left-color: #6a5840;
    border-bottom-color: #1a1612;
    border-right-color: #5a4830;
}

/* Table odd-row distinction */
body.dark-mode #items-table tbody tr:nth-child(odd) {
    background: #302618;
}

/* Detail panel title border overrides */
body.dark-mode .detail-card-title {
    border-top-color: #6a5840;
    border-left-color: #6a5840;
    border-bottom-color: #1a1612;
}

/* Detail image border */
body.dark-mode .detail-image-wrap img {
    border-color: #4a3d30;
    border-bottom-color: #1a1612;
    border-right-color: #1a1612;
    background: #1a1612;
}

/* Color picker in dark mode */
body.dark-mode .color-picker-wrap input[type="color"] {
    border-color: #5a4830;
    background: #2a2218;
}

/* Corner buttons in dark mode */
body.dark-mode #darkmode-toggle,
body.dark-mode #wiki-link-btn {
    background: #3a2e20;
    border-color: #5a4830;
    color: #e8dcc8;
}
body.dark-mode #darkmode-toggle:hover,
body.dark-mode #wiki-link-btn:hover {
    background: #4a3e28;
    border-color: #6a5840;
    color: #e8b465;
}

/* Form elements */
body.dark-mode input[type="number"] {
    color-scheme: dark;
}
body.dark-mode select {
    color-scheme: dark;
}


body.dark-mode .color-picker-btn {
    background: #2a2218;
    border-color: #4a3d30;
    color: #e8dcc8;
}

body.dark-mode .color-picker-btn:hover,
body.dark-mode .color-picker-btn.active {
    background: #3d3225;
    border-color: #5a4830;
}

body.dark-mode .color-picker-dropdown {
    background: #2a2218;
    border-color: #1a1612;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body.dark-mode .color-picker-dropdown input[type="color"] {
    background: #2a2218;
    border-color: #4a3d30;
}

body.dark-mode .color-preview-row {
    background: #332a1f;
}

body.dark-mode .color-preview-row .preview-hex {
    color: #a89878;
}

body.dark-mode .color-apply-btn {
    background: linear-gradient(to bottom, #5a4830 0%, #4a3a25 100%);
    border-color: #5a4830;
    color: #e8dcc8;
}

body.dark-mode .color-apply-btn:hover {
    background: linear-gradient(to bottom, #6a5840 0%, #5a4830 100%);
}

body.dark-mode .color-clear-btn {
    border-color: #4a3d30;
    color: #a89878;
}

body.dark-mode .color-clear-btn:hover {
    background: #3d3225;
    border-color: #5a4830;
    color: #e8dcc8;
}