/* Modern Gray-Blue Style for phpBB2 / WR-Forum Professional */
/* Adapted by ChatGPT based on Ferrari template by Kelevra */

:root {
    --bg-dark: #0e1a21;
    --bg-light: #1c2a33;
    --bg-panel: #243745;
    --bg-hover: #2e4c5f;
    --text-main: #d7e2eb;
    --text-muted: #aabac6;
    --text-accent: #7ec8f3;
    --accent: #5aa7d9;
    --border: #3a4e5b;
    --white: #ffffff;
}

body {
    background: var(--bg-dark) url(bg_space.jpg) no-repeat center top fixed;
    color: var(--text-main);
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    scrollbar-face-color: var(--bg-panel);
    scrollbar-track-color: var(--bg-dark);
    scrollbar-arrow-color: var(--accent);
}

a {
    text-decoration: none;
    color: var(--accent);
}
a:hover {
    text-decoration: underline;
    color: var(--white);
}

.bodyline {
    background-color: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.forumline {
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

td.row1, td.row2, td.row3, td.inputrow {
    background-color: var(--bg-light);
}

th {
    color: var(--white);
    font-size: 13px;
    font-weight: bold;
    background: linear-gradient(180deg, #3b5365, #2a3d4c);
    border-bottom: 1px solid var(--border);
}

td.cat, td.catHead, td.catBottom {
    background: linear-gradient(180deg, #2f4858, #1f303d);
    color: var(--white);
}

.maintitle, h1, h2 {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: var(--accent);
    text-shadow: 0 0 5px rgba(90,167,217,0.3);
}

.gen, .genmed, .gensmall {
    color: var(--text-main);
}
a.gen:hover, a.genmed:hover, a.gensmall:hover {
    color: var(--white);
}

.mainmenu {
    font-size: 13px;
    color: var(--text-main);
}
a.mainmenu:hover {
    color: var(--accent);
}

.cattitle, a.cattitle {
    font-weight: bold;
    font-size: 14px;
    color: var(--white);
}

.forumlink {
    font-weight: bold;
    font-size: 14px;
}
a.forumlink {
    color: var(--text-accent);
}
a.forumlink:hover {
    color: var(--white);
}

.forumdescr {
    color: var(--text-muted);
}

.nav {
    font-weight: bold;
    color: var(--text-main);
}
a.nav:hover {
    color: var(--accent);
}

.topictitle {
    font-weight: bold;
    color: var(--text-main);
}
a.topictitle:hover {
    color: var(--accent);
}

.name, .postdetails {
    color: var(--text-muted);
}

.postbody {
    font-size: 13px;
    color: var(--text-main);
}

.code {
    font-family: Courier, monospace;
    font-size: 13px;
    color: var(--white);
    background: #1b2c38;
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 6px;
}

.quote {
    font-size: 13px;
    color: var(--white);
    background: #2a3d4c;
    border-left: 4px solid var(--accent);
    padding: 6px 10px;
    border-radius: 4px;
}

.copyright {
    font-size: 12px;
    color: var(--text-muted);
}
a.copyright:hover {
    color: var(--accent);
}

/* Inputs & Buttons */
input, textarea, select {
    color: var(--text-main);
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 4px var(--accent);
}

input.button, input.mainoption, input.liteoption {
    background: linear-gradient(180deg, #3b5b72, #27475a);
    color: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
input.button:hover {
    background: var(--accent);
}

/* Forum Elements */
td.categorybar {
    background: linear-gradient(180deg, #2f4d60, #1c2e3a);
}

td.forumcolumns {
    color: var(--text-main);
    background-color: var(--bg-panel);
}

/* Guest avatar fallback */
.guestavatar {
    width: 120px;
    height: 120px;
    background: #aacbe1;
    color: #2c3f4b;
    font-size: 50px;
    display: table-cell;
    border-radius: 20%;
    text-align: center;
    vertical-align: middle;
}

/* Navigation menu (admin) */
#nav8, #nav8 ul, #nav8 li {margin:0;padding:0;border:0;}
#nav8 {background: var(--bg-panel); width:100%; border-spacing:0;}
#nav8 ul {position:absolute; display:none; background: var(--bg-hover);}
#nav8 td:hover ul {display:block;}
#nav8 td, #nav8 a {color: var(--text-main);}
#nav8 td:hover, #nav8 li:hover {background: var(--bg-hover);}
#nav8 a:hover {color: var(--accent);}

/* QR Code hover */
#qr img {
    width:35px; height:35px;
    position:fixed; right:10px; top:10px;
    border:1px solid var(--border);
    background: var(--white);
    padding:1px;
}
#qr img:hover {
    width:200px; height:200px;
    z-index:100; padding:2px;
}

/* Loading bar */
#cssbar-border {
    border:3px solid var(--accent);
}
#cssbar-line {
    background-color: var(--accent);
}