/* =====================================================================
   PROJECT ZERO G — DARK THEME
   Child of prosilver · Only overrides colors and minimal layout
   =====================================================================

   GUIDE FOR FUTURE AGENTS:
   ========================
   This is a phpBB3 prosilver child theme. It imports prosilver's full
   stylesheet and then overrides colors to create a dark theme matching
   the 2019 "Ad Infinitum v1.06" look.

   HOW THIS THEME WORKS:
   1. Prosilver uses light blue-gray backgrounds (#BACCD9, #CADCEB,
      #E1EBF2, #ECF1F3, #F9F9F9) and gradients everywhere.
   2. Section 1 below ("GLOBAL DARK RESET") kills ALL of those in one
      sweep using broad selectors. This is the most efficient approach.
   3. Section 2 ("SELECTIVE OVERRIDES") then re-applies specific colors
      where elements need to differ from the global reset (e.g., header
      bars in dark red, alternating row shading, active tabs lighter).

   TO CHANGE THE COLOR SCHEME:
   - Edit the CSS variables in :root below. Almost everything references
     these variables, so changing them will cascade globally.
   - The only hardcoded colors are: #FFFFFF (white text on hover/active
     pagination, search input bg), #343434 (row hover — slightly lighter
     than --zerog-dark4), and the banner image path.

   TO ADD NEW COLOR OVERRIDES:
   - First check if the element is already covered by the global reset.
     If it's dark but wrong shade, add a rule in Section 2.
   - If a new prosilver element appears light, it likely has a background
     set in prosilver's colours.css — add it to the global reset list.

   CACHE BUSTING:
   - After uploading CSS changes, bump `assets_version` in the database:
     UPDATE zerog3_config SET config_value = config_value + 1
       WHERE config_name = 'assets_version';
   - DB: beating_ibrd1 on forum.projectzerog.com, user djpowerhaus
   - Or users can hard-refresh with Ctrl+Shift+R.

   SERVER DETAILS:
   - SSH: djpowerhaus@projectzerog.com (key auth, ed25519)
   - CSS path: /home/djpowerhaus/projectzerog.com/forum/styles/
               prosilver_zerog/theme/stylesheet.css
   - Local copy: C:\Users\Mike\zerog_theme\stylesheet.css
   ===================================================================== */

@import url("../../prosilver/theme/stylesheet.css");

/* =====================================================================
   CSS VARIABLES — Single source of truth for the color palette
   ===================================================================== */
:root {
    /* Backgrounds (darkest to lightest) */
    --zerog-dark1: #1B1B1B;   /* primary content bg, panels, rows-odd */
    --zerog-dark2: #232323;   /* secondary bg: postprofile, rows-even, inputs, action-bar */
    --zerog-black: #222222;   /* page/body bg, wrap */
    --zerog-dark3: #2a2a2a;   /* tertiary: buttons, inactive tabs, sidebar links */
    --zerog-dark4: #333333;   /* quaternary: active tabs, hover states */

    /* Text */
    --zerog-text: #E5E5E5;    /* primary text */
    --zerog-text-dim: #AAAAAA; /* secondary text: signatures, stats, profile info */

    /* Accent — red */
    --zerog-red: #C51E21;      /* links, headings, icons */
    --zerog-red-hover: #E52528; /* link hover */
    --zerog-red-dark: #8B1517;  /* header bars (TOPICS, POSTS, etc.) */

    /* Borders */
    --zerog-border: #3a3a3a;
}


/* =====================================================================
   SECTION 1: GLOBAL DARK RESET
   Kill all prosilver light backgrounds, gradients, and text colors in
   one sweep. This is the "top-down" approach — much more efficient than
   hunting individual selectors. Everything gets dark, then Section 2
   fine-tunes specific elements.
   ===================================================================== */

/* --- 1a. Page-level backgrounds --- */
html, body, #wrap {
    background-color: var(--zerog-black) !important;
}

body {
    color: var(--zerog-text) !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* --- 1b. Kill ALL prosilver background-images (gradients, sprites) ---
   Exception: .headerbar keeps its banner image (re-applied in Section 2) */
.panel, .inner, .post, .forabg, .forumbg, .navbar,
.navlinks, .breadcrumbs, .stat-block, .statistics,
.action-bar, .login-box, .successbox, .errorbox, .information,
.rules, .notice, .post-notice, .announce,
ul.topiclist, ul.topiclist.forums,
li.tab a, .minitabs .tab > a,
.navigation a, .navigation a:hover, .navigation .active-subsection a,
.button, .button1, .button2, input[type="submit"],
.dropdown-extended .header,
.cp-main .pm-message, .cp-mini, .ucprowbg,
.jumpbox-forum-link, .jumpbox-sub-link,
.bg1, .bg2, .bg3 {
    background-image: none !important;
    filter: none !important;
}

/* --- 1c. Dark backgrounds for all content areas --- */
.panel, .inner, .post, .forabg, .forumbg,
.bg1, .bg2, .bg3,
.navlinks, .breadcrumbs,
.stat-block, .statistics,
.login-box, .action-bar,
.rules, .notice, .post-notice, .announce,
.successbox, .errorbox, .information,
.panel-container .panel, .cp-main .pm,
ul.topiclist, ul.topiclist.forums,
td,
.phpbb_alert, .loading_indicator {
    background-color: var(--zerog-dark1) !important;
    color: var(--zerog-text) !important;
}

.phpbb_alert {
    border-color: var(--zerog-border) !important;
}

/* --- 1d. Global text color ---
   Overrides all prosilver dark text colors: #000, #333, #536482,
   #28313F, #425067, #4C5D77, #5C758C, #115098, #0D4473 */
h2,
.postbody, .postbody .content, .content,
.postprofile, .postprofile strong, .postprofile dd strong,
.list-inner strong, li.row strong,
label, dd label, .panel-container label,
dl dd, .panel-container dd,
dl.details dt, dl.details dd,
dl.mini dt,
dl.faq dt,
.panel-container h2, .content h2, .panel h2,
.panel-container .panel li.header dd,
.panel-container .panel li.header dt,
.panel-container table.table1 thead th,
.pagination a, .pagination strong,
table.table1 td, table.table1 tbody th,
ul.topiclist li,
.inputbox, .message-box textarea,
a.button1, a.button2,
input.button1, input.button2, input.button3 {
    color: var(--zerog-text) !important;
}

/* Dim text — secondary/meta info */
.copyright,
fieldset.polls dl,
.attachbox p, .attachbox p.stats,
dl.file dd, dl.thumbnail dd,
.notification_list p.notification-time {
    color: var(--zerog-text-dim) !important;
}

/* --- 1e. Global border color --- */
.forabg, .forumbg, #wrap, .navbar,
.navlinks, .breadcrumbs,
.topiclist li.row, .topiclist li.row dt, .topiclist li.row dd,
.post .inner, .postprofile,
.login-box, .action-bar, .login-box,
hr, .rules,
.panel-container h3, .panel-container hr, .cp-menu hr,
.successbox h3, .errorbox h3,
.cp-main .pm-message {
    border-color: var(--zerog-border) !important;
}

/* --- 1f. Links — red accent everywhere --- */
a, a:link, a:visited,
a.forumtitle, a.topictitle,
h3 a, .postprofile dt a, .postprofile dd a,
#footer a, .topiclist .header a,
li.breadcrumbs span a, .breadcrumbs a,
ul.navlinks a {
    color: var(--zerog-red) !important;
}

a:hover, a:active,
a.forumtitle:hover, a.topictitle:hover {
    color: var(--zerog-red-hover) !important;
}

/* --- 1g. Headings --- */
h3 {
    border-color: var(--zerog-border) !important;
    color: var(--zerog-red) !important;
}

.successbox h3, .errorbox h3 {
    color: var(--zerog-text) !important;
}


/* =====================================================================
   SECTION 2: SELECTIVE OVERRIDES
   Fine-tune elements that need colors different from the global reset.
   ===================================================================== */

/* --- 2a. Header & Banner --- */
.headerbar, #header-nav {
    background-color: var(--zerog-black) !important;
    border-bottom: none !important;
    background-image: url("images/top_image.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    min-height: 160px !important;
    padding: 0 !important;
}

.headerbar {
    position: relative !important;
}

/* Logo link = clickable overlay covering entire banner */
a#logo.logo {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

a#logo.logo .site_logo {
    display: none !important;
}

/* Hide site title/description — banner image replaces them */
#site-description h1,
#site-description p:not(.skiplink) {
    display: none !important;
}

/* Search box positioned in navbar area */
.headerbar .search-box {
    position: absolute !important;
    right: 10px !important;
    top: 200px !important;
    margin-top: 0 !important;
    z-index: 20 !important;
}

/* Navbar icons — white icons, text stays red */
.navbar a > i.icon,
.linklist a > i.icon {
    color: #FFFFFF !important;
}

/* Navbar — slightly different shade than breadcrumbs */
.navbar {
    background-color: var(--zerog-dark2) !important;
}

/* --- 2b. Forum containers --- */
.forabg, .forumbg {
    border-radius: 0 !important;
}

.icon-blue {
    color: var(--zerog-red) !important;
    border-color: var(--zerog-red) !important;
}

/* --- 2c. Alternating rows ---
   Row bg goes on dl.row-item so the forum/topic status icon (also a
   background-image on dl.row-item) remains visible. .list-inner must
   be transparent so it doesn't cover the icon area. */
li.row:nth-child(odd) dl.row-item {
    background-color: var(--zerog-dark1) !important;
}

li.row:nth-child(even) dl.row-item {
    background-color: var(--zerog-dark2) !important;
}

li.row .list-inner {
    background-color: transparent !important;
}

li.row:hover,
li.row:hover dd {
    background-color: #343434 !important;
    border-color: var(--zerog-border) !important;
}

li.row:hover dt,
li.row:hover .list-inner {
    background-color: transparent !important;
}

/* --- 2d. Forum list header bars (dark red) ---
   TOPICS | POSTS | LAST POST etc. */
.topiclist .header {
    background-color: var(--zerog-red-dark) !important;
    color: var(--zerog-text) !important;
    border-color: var(--zerog-red) !important;
}

.topiclist .header dl {
    position: relative !important;
    min-height: 24px !important;
}

.topiclist .header dt {
    color: var(--zerog-text) !important;
    border-color: var(--zerog-red) !important;
    font-size: 16px !important;
    padding-left: 10px !important;
    line-height: 1 !important;
    width: auto !important;
    margin-right: 440px !important;
}

.topiclist .header dd {
    color: var(--zerog-text) !important;
    border-color: var(--zerog-red) !important;
    position: absolute !important;
    top: 0 !important;
    line-height: 24px !important;
}

.topiclist .header dd.topics { right: 345px !important; }
.topiclist .header dd.posts  { right: 250px !important; }
.topiclist .header dd.views  { right: 250px !important; }
.topiclist .header dd.lastpost { right: 0 !important; }
.topiclist .header dd.mark  { right: 30px !important; }

/* On topic listing pages, Replies (dd.posts) shifts right */
.section-viewforum .topiclist .header dd.posts {
    right: 345px !important;
}

/* Table headers (same dark red) */
th {
    background-color: var(--zerog-red-dark) !important;
    color: var(--zerog-text) !important;
}

/* --- 2e. Post profile sidebar --- */
.postprofile {
    background-color: var(--zerog-dark2) !important;
    color: var(--zerog-text-dim) !important;
}

.signature {
    border-color: var(--zerog-border) !important;
    color: var(--zerog-text-dim) !important;
}

/* --- 2f. Quotes and code blocks --- */
blockquote {
    background-color: var(--zerog-dark2) !important;
    border-color: var(--zerog-dark4) !important;
    color: var(--zerog-text) !important;
}

blockquote blockquote {
    background-color: var(--zerog-dark3) !important;
}

.codebox, code {
    background-color: var(--zerog-dark2) !important;
    border-color: var(--zerog-dark4) !important;
    color: var(--zerog-text) !important;
}

/* --- 2g. Action bar --- */
.action-bar {
    background-color: var(--zerog-dark2) !important;
    color: var(--zerog-text-dim) !important;
}

/* --- 2h. Moderation / notice boxes --- */
div[class*="notice"], .post-notice {
    background-color: var(--zerog-dark3) !important;
    border-color: var(--zerog-red-dark) !important;
    color: var(--zerog-text-dim) !important;
}

/* --- 2i. Buttons ---
   Primary: dark gray bg, light text
   Secondary (Jump to, Quick-mod): kept light with dark text for contrast
   Hover: red bg, white text */
.button, input[type="submit"], .button1, .button2 {
    background-color: var(--zerog-dark3) !important;
    color: var(--zerog-text) !important;
    border-color: var(--zerog-border) !important;
    box-shadow: none !important;
}

span.button.button-secondary,
.dropdown-container span.button.button-secondary.dropdown-trigger {
    background-image: linear-gradient(#FFFFFF 0%, #E9E9E9 100%) !important;
    background-color: #E9E9E9 !important;
    color: var(--zerog-black) !important;
}

.button:hover, input[type="submit"]:hover,
.button1:hover, .button2:hover {
    background-color: var(--zerog-red) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: var(--zerog-red) !important;
}

/* Remove prosilver button glow globally */
.button, button, .button1, .button2,
a.button-search, button.button-search,
a.button-search-end, button.button-search-end {
    box-shadow: none !important;
}

/* --- 2j. Form inputs --- */
input[type="text"], input[type="password"], textarea, select {
    background-color: var(--zerog-dark2) !important;
    color: var(--zerog-text) !important;
    border-color: var(--zerog-border) !important;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: var(--zerog-red) !important;
}

/* Search input — white bg for visibility */
.search-box, .search-box.search-header {
    box-shadow: none !important;
}

.search-box input, input[type="search"] {
    -webkit-appearance: none !important;
    background-color: #FFFFFF !important;
    color: #222222 !important;
    border-color: var(--zerog-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-box input:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--zerog-red) !important;
}

/* Chrome autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
    -webkit-text-fill-color: var(--zerog-text) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Focus glow — red instead of blue */
*:focus {
    outline-color: var(--zerog-red) !important;
    box-shadow: 0 0 3px var(--zerog-red) !important;
}

input:focus, textarea:focus, select:focus {
    outline-color: var(--zerog-red) !important;
    box-shadow: 0 0 3px var(--zerog-red) !important;
}

/* --- 2k. Dropdown menus ---
   These keep white/light backgrounds with dark text for readability */
.dropdown-container .dropdown {
    background-color: var(--zerog-dark2) !important;
    border-color: var(--zerog-border) !important;
    z-index: 25 !important;
}

.dropdown-container .dropdown ul {
    background-color: #FFFFFF !important;
}

.dropdown-container .dropdown li a,
.dropdown-container .dropdown ul li a {
    color: var(--zerog-black) !important;
}

.dropdown-container .dropdown li:hover a {
    background-color: var(--zerog-red) !important;
    color: #FFFFFF !important;
}

.dropdown-extended .header {
    background-color: var(--zerog-dark3) !important;
    color: var(--zerog-text) !important;
    text-shadow: none !important;
}

/* --- 2l. Jumpbox dropdown --- */
.jumpbox-forum-link,
.jumpbox-sub-link {
    background-color: var(--zerog-dark2) !important;
}

.jumpbox-forum-link:hover,
.jumpbox-sub-link:hover {
    background-color: var(--zerog-dark4) !important;
}

.jumpbox .dropdown .pointer-inner {
    border-color: var(--zerog-dark2) transparent !important;
}

/* --- 2m. Pagination --- */
.pagination li.active span {
    background-color: var(--zerog-red) !important;
    color: #FFFFFF !important;
}

/* --- 2n. Footer --- */
#footer, .copyright {
    background-color: var(--zerog-black) !important;
    color: var(--zerog-text-dim) !important;
}

/* --- 2o. Statistics --- */
.stat-block, .statistics {
    color: var(--zerog-text-dim) !important;
}

/* --- 2p. UCP / MCP tabs ---
   Inactive: --zerog-dark3 (darker)
   Active/hover: --zerog-dark4 (lighter) */
li.tab a {
    background-color: var(--zerog-dark3) !important;
    color: var(--zerog-red) !important;
    border-color: var(--zerog-border) !important;
}

li.tab.activetab a,
li.tab a:hover {
    background-color: var(--zerog-dark4) !important;
    color: var(--zerog-red) !important;
    border-color: var(--zerog-border) !important;
}

.minitabs .tab > a {
    background-color: var(--zerog-dark3) !important;
}

.minitabs .activetab > a,
.minitabs .activetab > a:hover {
    background-color: var(--zerog-dark4) !important;
    color: var(--zerog-text) !important;
}

.responsive-tab .responsive-tab-link:before {
    border-color: var(--zerog-text-dim) !important;
}

/* --- 2q. UCP / MCP sidebar navigation ---
   Same pattern as tabs: dark3 inactive, dark4 active/hover */
.navigation a {
    background: var(--zerog-dark3) !important;
    color: var(--zerog-red) !important;
    filter: none !important;
}

.navigation a:hover {
    background: var(--zerog-dark4) !important;
    color: var(--zerog-red-hover) !important;
}

.navigation .active-subsection a,
.navigation .active-subsection a:hover {
    background: var(--zerog-dark4) !important;
    color: var(--zerog-red) !important;
    filter: none !important;
}

/* --- 2r. UCP / MCP panel content --- */
.panel-container .panel li.row {
    border-bottom-color: var(--zerog-border) !important;
    border-top-color: var(--zerog-dark2) !important;
}

.panel-container table.table1 thead th {
    border-bottom-color: var(--zerog-border) !important;
}

.cp-main .pm-message {
    background-color: var(--zerog-dark2) !important;
}

.cp-mini {
    background-color: var(--zerog-dark2) !important;
}

.ucprowbg {
    background-color: var(--zerog-dark2) !important;
}

/* --- 2s. Custom forum/topic status icons (book theme) ---
   Closed book = unread, open book = read.
   Overlays: star=sticky, !=announcement, lock=locked, green dot=mine, flame=hot.
   Images live in this child theme's images/ dir, not prosilver's. */

/* Topics */
.topic_read            { background-image: url("./images/topic_read.gif") !important; }
.topic_read_mine       { background-image: url("./images/topic_read_mine.gif") !important; }
.topic_read_hot        { background-image: url("./images/topic_read_hot.gif") !important; }
.topic_read_hot_mine   { background-image: url("./images/topic_read_hot_mine.gif") !important; }
.topic_read_locked     { background-image: url("./images/topic_read_locked.gif") !important; }
.topic_read_locked_mine { background-image: url("./images/topic_read_locked_mine.gif") !important; }
.topic_unread          { background-image: url("./images/topic_unread.gif") !important; }
.topic_unread_mine     { background-image: url("./images/topic_unread_mine.gif") !important; }
.topic_unread_hot      { background-image: url("./images/topic_unread_hot.gif") !important; }
.topic_unread_hot_mine { background-image: url("./images/topic_unread_hot_mine.gif") !important; }
.topic_unread_locked   { background-image: url("./images/topic_unread_locked.gif") !important; }
.topic_unread_locked_mine { background-image: url("./images/topic_unread_locked_mine.gif") !important; }
.topic_moved           { background-image: url("./images/topic_moved.gif") !important; }

/* Sticky */
.sticky_read           { background-image: url("./images/sticky_read.gif") !important; }
.sticky_read_mine      { background-image: url("./images/sticky_read_mine.gif") !important; }
.sticky_read_locked    { background-image: url("./images/sticky_read_locked.gif") !important; }
.sticky_read_locked_mine { background-image: url("./images/sticky_read_locked_mine.gif") !important; }
.sticky_unread         { background-image: url("./images/sticky_unread.gif") !important; }
.sticky_unread_mine    { background-image: url("./images/sticky_unread_mine.gif") !important; }
.sticky_unread_locked  { background-image: url("./images/sticky_unread_locked.gif") !important; }
.sticky_unread_locked_mine { background-image: url("./images/sticky_unread_locked_mine.gif") !important; }

/* Announcements / Global */
.announce_read         { background-image: url("./images/announce_read.gif") !important; }
.announce_read_mine    { background-image: url("./images/announce_read_mine.gif") !important; }
.announce_read_locked  { background-image: url("./images/announce_read_locked.gif") !important; }
.announce_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif") !important; }
.announce_unread       { background-image: url("./images/announce_unread.gif") !important; }
.announce_unread_mine  { background-image: url("./images/announce_unread_mine.gif") !important; }
.announce_unread_locked { background-image: url("./images/announce_unread_locked.gif") !important; }
.announce_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif") !important; }
.global_read           { background-image: url("./images/announce_read.gif") !important; }
.global_read_mine      { background-image: url("./images/announce_read_mine.gif") !important; }
.global_read_locked    { background-image: url("./images/announce_read_locked.gif") !important; }
.global_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif") !important; }
.global_unread         { background-image: url("./images/announce_unread.gif") !important; }
.global_unread_mine    { background-image: url("./images/announce_unread_mine.gif") !important; }
.global_unread_locked  { background-image: url("./images/announce_unread_locked.gif") !important; }
.global_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif") !important; }

/* Forums */
.forum_read            { background-image: url("./images/forum_read.gif") !important; }
.forum_read_locked     { background-image: url("./images/forum_read_locked.gif") !important; }
.forum_read_subforum   { background-image: url("./images/forum_read_subforum.gif") !important; }
.forum_unread          { background-image: url("./images/forum_unread.gif") !important; }
.forum_unread_locked   { background-image: url("./images/forum_unread_locked.gif") !important; }
.forum_unread_subforum { background-image: url("./images/forum_unread_subforum.gif") !important; }
.forum_link            { background-image: url("./images/forum_link.gif") !important; }

/* --- 2t. UCP title --- */
h2.ucp-title {
    color: var(--zerog-red) !important;
}

/* --- 2u. (Removed — merged into Section 1d global text reset) ---*/

/* --- 2v. Login/registration input text ---
   These pages use white-background inputs; text must be dark */
.login-box input[type="text"],
.login-box input[type="password"],
form#login input[type="text"],
form#login input[type="password"] {
    color: #000000 !important;
}

/* --- 2v. Broken avatar fallback --- */
.avatar img,
img.avatar {
    background-color: var(--zerog-dark3) !important;
    min-width: 20px !important;
    min-height: 20px !important;
}