/* ==========================================================================
   theme-modern.css
   Purpose: Safe visual override layer for AoWoW (load AFTER aowow.css)
   ========================================================================== */
   
   
/* ==========================================================================
   Hard background reset (fix accidental blue body)
   ========================================================================== */

html, body {
    background: #07090d !important;
}

body {
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(255, 209, 0, 0.08), rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, #0e1319 0%, #07090d 100%) !important;
}
   

/* --- Page background (outside content) --- */
html, body {
    height: 100%;
}

body {
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(255, 209, 0, 0.08), rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, #0e1319 0%, #07090d 100%);
    color: #cfcfcf;
}

/* Slightly soften default text rendering on dark backgrounds */
body, input, select, textarea, button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Main content panel ("the small grey window") --- */
.main-precontents {
    background: linear-gradient(180deg, #141a22 0%, #0f141b 100%);
    padding: 6px 10px;

    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.main-contents {
    padding: 12px;
    min-height: 550px;

    background:
        radial-gradient(900px 520px at 50% -140px, rgba(255, 209, 0, 0.10), rgba(0, 0, 0, 0) 62%),
        linear-gradient(180deg, #1b212a 0%, #11161d 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    border-radius: 8px;
}

#main-contents .text {
    color: #d6d6d6;
}

/* --- Links (keep your WoWhead-like gold but improve hover) --- */
a {
    color: #ffd100;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 209, 0, 0.14);
}

/* --- Common boxes (announcement / notices) --- */
.notice-box,
div.announcement-pagetop div.announcement-inner,
div.announcement-contenttop div.announcement-inner {
    background: linear-gradient(180deg, #151b23 0%, #10151c 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 8px !important;
}

/* --- Quote blocks --- */
.entryc .quote, .comment-body .quote,
.text .quote, .text blockquote,
.quote-blizz, .quote-wh {
    background: linear-gradient(180deg, #171c24 0%, #0f141b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* --- Listview: keep structure, just soften the heavy greys --- */
.listview {
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.listview-band-top, .listview-band-bottom,
.listview-mode-default, .listview-mode-div, .listview-mode-tiled, .listview-mode-calendar,
.listview-nodata {
    background: linear-gradient(180deg, #151a22 0%, #10151c 100%) !important;
    color: #d0d0d0 !important;
}

.listview-mode-default td {
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #dddddd !important;
}

.listview-mode-default tbody tr:hover,
.listview-mode-tiled td:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Table header links (sorting bar) */
.listview thead a {
    background: linear-gradient(180deg, #5b5f67 0%, #3f444c 100%) !important;
}

.listview th a:hover {
    background-color: #50555d !important;
}

/* --- Comments: reduce flat grey blocks --- */
.comment0, .comment1, .comment2,
.comment-markupdoc,
.comment-collapsed .comment {
    background: linear-gradient(180deg, #151a22 0%, #10151c 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- Dialogs / overlays --- */
div.dialog,
div.mapviewer,
div.modelviewer {
    background: linear-gradient(180deg, #1a2028 0%, #12161d 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}

/* --- Tooltips (optional safe polish) --- */
.wowhead-tooltip {
    background: linear-gradient(180deg, rgba(22, 28, 36, 0.98) 0%, rgba(14, 18, 24, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65) !important;
}

.wowhead-tooltip, .wowhead-tooltip * {
    color: #e0e0e0;
}

/* --- Small polish: images in content --- */
img.border {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background-color: #0b0f14 !important;
}

/* ==========================================================================
   HOME LOGO – animated pulse (WoW style, safe)
   ========================================================================== */

#home-logo.home-logo a {
    width: 660px !important;   /* +10% */
    height: 330px !important;  /* +10% */
}

/* fallback size so logo never disappears */
#home-logo.home-logo a {
    display: block !important;
    width: 600px !important;
    height: 300px !important;

    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    /* base brightness */
    filter: brightness(1.3) contrast(1.08);

    /* animation */
    animation: mwLogoPulse 4.8s ease-in-out infinite;
}

/* pulsing glow */
@keyframes mwLogoPulse {
    0% {
        filter: brightness(1.25);
        box-shadow:
            0 0 35px rgba(0,160,255,0.25),
            0 0 90px rgba(0,110,255,0.18);
    }
    50% {
        filter: brightness(1.45);
        box-shadow:
            0 0 70px rgba(0,190,255,0.55),
            0 0 160px rgba(0,130,255,0.30);
    }
    100% {
        filter: brightness(1.25);
        box-shadow:
            0 0 35px rgba(0,160,255,0.25),
            0 0 90px rgba(0,110,255,0.18);
    }
}

#home-logo.home-logo::before {
    content: "";
    display: block;
    width: 520px;
    height: 320px;
    margin: 0 auto -320px;
    pointer-events: none;

    background: radial-gradient(
        closest-side,
        rgba(0,150,255,0.18),
        rgba(0,0,0,0) 72%
    );

    animation: mwAura 6s ease-in-out infinite;
}

@keyframes mwAura {
    0%,100% { opacity: 0.55; }
    50%     { opacity: 0.85; }
}


/* ==========================================================================
   Top bars (toptabs / topbar-buttons)
   ========================================================================== */

#toptabs.toptabs {
    background: linear-gradient(180deg, #141a22 0%, #0f141b 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

#toptabs.toptabs a,
#toptabs.toptabs a:link,
#toptabs.toptabs a:visited {
    color: #cfd6dd !important;
}

#toptabs.toptabs a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 209, 0, 0.14) !important;
}

#topbar-buttons.topbar-buttons {
    background: linear-gradient(180deg, #1a2029 0%, #121820 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#topbar-buttons.topbar-buttons a,
#topbar-buttons.topbar-buttons a:link,
#topbar-buttons.topbar-buttons a:visited {
    color: #d2d8df !important;
}

#topbar-buttons.topbar-buttons a:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   Search / filter header blocks (old grey gradient)
   ========================================================================== */

.listview-filter,
.listview-filters,
.lv-filters,
.filter-options,
#fi, #fi2, #filters,
div[id^="fi_"],
div[id^="filter"],
div[id^="filters"] {
    background: linear-gradient(180deg, #151b23 0%, #10151c 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
}

.listview-filter input,
.listview-filter select,
.listview-filters input,
.listview-filters select {
    background-color: #0c1117 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e0e0e0 !important;
}

/* ==========================================================================
   Infobox / Quick Facts (avoid pills, keep clean)
   ========================================================================== */

table.infobox th > div {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

table.infobox {
    background: linear-gradient(180deg, #0b1430 0%, #050914 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

table.infobox td,
table.infobox th {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

table.infobox td > div:not(.infobox-spacer) {
    display: block !important;
    margin: 8px 12px !important;
    padding: 10px 12px !important;

    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

table.infobox,
table.infobox td,
table.infobox th {
    color: #e8eef7 !important;
}

/* ==========================================================================
   Top navigation dropdown menu (Browse / Utilities) – unified (NO duplicates)
   ========================================================================== */

/* containers (menu + submenus) */
#topbar-buttons .menu,
#topbar-buttons .menu ul {
    background: linear-gradient(180deg, #121821 0%, #0b1017 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65) !important;
}

/* neutralize old list backgrounds */
#topbar-buttons .menu li,
#topbar-buttons .menu ul li {
    background: transparent !important;
}

/* links */
#topbar-buttons .menu a,
#topbar-buttons .menu a:link,
#topbar-buttons .menu a:visited {
    display: block !important;
    padding: 6px 12px !important;
    color: #d6dde6 !important;
    background: transparent !important;
    text-decoration: none !important;
}

#topbar-buttons .menu a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
}

/* active/checked/selected */
#topbar-buttons .menu .checked > a,
#topbar-buttons .menu .active > a,
#topbar-buttons .menu a.selected {
    background: rgba(255, 209, 0, 0.12) !important;
    color: #ffd100 !important;
}

/* section headers (Character / Pets / ...) */
#topbar-buttons .menu b,
#topbar-buttons .menu strong,
#topbar-buttons .menu .header,
#topbar-buttons .menu li strong {
    display: block !important;
    padding: 8px 12px 6px !important;
    margin-top: 2px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* separators */
#topbar-buttons .menu hr,
#topbar-buttons .menu .separator {
    border: 0 !important;
    height: 1px !important;
    margin: 6px 0 !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

/* submenu arrows */
#topbar-buttons .menu li.has-submenu > a::after,
#topbar-buttons .menu li > a .arrow {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ==========================================================================
   Filter UI (fi_*) – links like "Add another Filter" and criteria dropdown
   ========================================================================== */

a#fi_addcriteria,
a#fi_addcriteria:link,
a#fi_addcriteria:visited {
    color: #ffd100 !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
}

a#fi_addcriteria:hover {
    color: #ffffff !important;
    background: rgba(255, 209, 0, 0.10) !important;
    text-shadow: none !important;
}

#fi a,
#fi2 a,
div[id^="fi_"] a {
    color: #ffd100 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
}

#fi a:hover,
#fi2 a:hover,
div[id^="fi_"] a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

#fi, #fi2, div[id^="fi_"] {
    background: linear-gradient(180deg, #121821 0%, #0b1017 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65) !important;
}

/* ==========================================================================
   Gloss overlay for AoWoW buttons / button-like links
   ========================================================================== */

/* common button selectors used in AoWoW */
a.button,
a.btn,
input[type="submit"],
input[type="button"],
button {
    position: relative;
    overflow: hidden;
}

/* glossy shine */
a.button::before,
a.btn::before,
input[type="submit"]::before,
input[type="button"]::before,
button::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.00) 100%
    );
    pointer-events: none;
}


/* ==========================================================================
   Item list rows (listview) – WoWhead-like glossy highlight
   ========================================================================== */

/* the cell that contains item icon + text */
.listview-mode-default td,
.listview-mode-div td,
.listview td {
    position: relative;
    overflow: hidden;
}

/* glossy shine layer */
.listview-mode-default td::before,
.listview-mode-div td::before,
.listview td::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 45%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.05) 35%,
        rgba(255, 255, 255, 0.00) 100%
    );

    pointer-events: none;
    opacity: 0.75;
}

/* subtle inner depth */
.listview-mode-default td {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* hover enhancement */
.listview-mode-default tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.listview-mode-default tbody tr:hover td::before {
    opacity: 1;
}

/* ==========================================================================
   Small tabs under tooltip/model (Criteria / See also / Same model ...)
   ========================================================================== */

/* base style for the clickable tab blocks */
div.tab,
div.tab-off,
div.tab-on,
div.tabbed,
div.tabs a,
div.tabs div {
    position: relative;
    overflow: hidden;
    border-radius: 6px !important;

    background: linear-gradient(180deg, #2a313a 0%, #171c22 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.45) !important;

    color: #e6e6e6 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}

/* glossy shine */
div.tab::before,
div.tab-off::before,
div.tab-on::before,
div.tabbed::before,
div.tabs a::before,
div.tabs div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.00) 100%
    );
    pointer-events: none;
}

/* hover */
div.tab:hover,
div.tab-off:hover,
div.tabs a:hover,
div.tabs div:hover {
    background: linear-gradient(180deg, #353f4b 0%, #1a2028 100%) !important;
    border-color: rgba(255, 209, 0, 0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 10px 24px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(255, 209, 0, 0.10) !important;
    color: #ffffff !important;
}

/* active/on tab */
div.tab-on {
    border-color: rgba(255, 209, 0, 0.45) !important;
    color: #ffd100 !important;
}