/*
  ComputeX overrides for phpBB (based on DVGFX / prosilver)
  Goal: match ComputeX landing theme (deep navy/black, subtle borders, green accent, pill buttons)
*/

:root{
  --cx-bg:#000000;
  --cx-ink:#e5e7eb;
  --cx-muted:#9ca3af;
  --cx-border: rgba(148,163,184,.22);

  --cx-accent:#1dbf73;
  --cx-accent-hover:#22c55e;
  --cx-accent-soft: rgba(34,197,94,.20);

  --cx-panel: rgba(15,23,42,.88);
  --cx-panel-2: rgba(15,23,42,.72);
  --cx-panel-3: rgba(2,6,23,.55);

  --cx-login-a:#0b1220;
  --cx-login-b:#111827;
  --cx-login-a-hover:#0f172a;
  --cx-login-b-hover:#1f2937;
}

html, body{
  background: var(--cx-bg) !important;
  color: var(--cx-ink);
}

body{
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%) fixed !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Headings + brand */
.site-description h1,
h1, h2, h3, h4,
.forumtitle,
.topic-title a,
.topictitle{
  font-family: Michroma, "Chakra Petch", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .06em;
}

.site-description h1{
  text-transform: uppercase;
}

.site-description p{
  color: var(--cx-muted) !important;
}

/* Layout containers */
.wrap{
  background: transparent !important;
}

.headerbar{
  background: var(--cx-panel) !important;
  border: 1px solid var(--cx-border) !important;
  border-radius: 16px;
  padding: 10px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.55);
}

.navbar{
  background: var(--cx-panel-3) !important;
  border: 1px solid var(--cx-border) !important;
  border-radius: 16px;
}

/* Common boxes */
.forabg, .forumbg, .panel, .post, .bg1, .bg2, .bg3,
.ucprowbg, .fieldsbg{
  background: var(--cx-panel-2) !important;
  border: 1px solid var(--cx-border) !important;
  border-radius: 16px;
}

/* Reduce harsh separators */
hr,
.separator,
.postprofile,
.postbody,
.content,
.signature,
.notice{
  border-color: rgba(148,163,184,.18) !important;
}

/* Links */
a{ color: rgba(229,231,235,.92); }
a:hover{ color: #ffffff; }

a.forumtitle,
a.topictitle{
  color: rgba(229,231,235,.96) !important;
}

a.forumtitle:hover,
a.topictitle:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(148,163,184,.55);
}

/* Accent highlights */
.mark,
a.subforum.read,
a.subforum.unread,
li.row:hover,
li.row:hover a,
.pagination li.active span,
.pagination li.active a,
.jumpbox-cat-link,
.jumpbox-forum-link{
  color: var(--cx-ink) !important;
}

/* Site logo */
.site_logo{
  width: 72px !important;
  height: 72px !important;
  background-image: url("./images/site_logo.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.logo{
  padding: 8px 14px 0 10px !important;
}

/* Buttons -> pill look */
.button,
.button1,
.button2,
input.button1,
input.button2,
a.button1,
a.button2,
button.button1,
button.button2{
  border-radius: 999px !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Primary */
.button1,
input.button1,
a.button1,
button.button1{
  background: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  color: #0b1120 !important;
  box-shadow: 0 16px 34px rgba(34,197,94,.14), 0 14px 30px rgba(0,0,0,.28);
}

.button1:hover,
input.button1:hover,
a.button1:hover,
button.button1:hover{
  background: var(--cx-accent-hover) !important;
  border-color: var(--cx-accent-hover) !important;
}

/* Secondary */
.button2,
input.button2,
a.button2,
button.button2{
  background: linear-gradient(135deg, var(--cx-login-a), var(--cx-login-b)) !important;
  border-color: rgba(96,165,250,.65) !important;
  color: rgba(229,231,235,.96) !important;
  box-shadow: 0 16px 34px rgba(96,165,250,.14), 0 14px 30px rgba(0,0,0,.28);
}

.button2:hover,
input.button2:hover,
a.button2:hover,
button.button2:hover{
  background: linear-gradient(135deg, var(--cx-login-a-hover), var(--cx-login-b-hover)) !important;
  border-color: rgba(96,165,250,.90) !important;
}

/* Inputs */
.inputbox,
textarea{
  background: rgba(2,6,23,.65) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  color: var(--cx-ink) !important;
  border-radius: 12px;
}

.inputbox:focus,
textarea:focus{
  border-color: rgba(96,165,250,.75) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}

/* Tabs + pagination */
#tabs .tab > a,
#tabs .tab > a:hover,
#tabs .activetab > a,
#tabs .activetab > a:hover{
  border-radius: 999px;
}

.pagination li a,
.pagination li span{
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
}

.pagination li a:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.20) !important;
}

.pagination li.active span,
.pagination li.active a{
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.40) !important;
}

/* Make quote/code blocks match */
blockquote,
.codebox{
  border-radius: 14px;
  border-color: rgba(148,163,184,.22) !important;
  background: rgba(2,6,23,.55) !important;
}

/* Small mobile polish */
@media (max-width: 700px){
  .site_logo{ width: 60px !important; height: 60px !important; }
  .site-description h1{ font-size: 18px; }
}