/*
 * EvoMU Website – InfoBase Theme Overlay
 *
 * What it does:
 * - Makes the main website look like the EvoMU InfoBase (dark / launcher-blue)
 * - Works as an overlay: it overrides existing styles without deleting your current CSS
 *
 * Install:
 * 1) Put this file to: assets/EvoMU/css/infobase-theme.css
 * 2) In application/views/EvoMU/view.header.php add (after style-new.css):
 *    <link rel="stylesheet" href="<?= $this->config->base_url; ?>assets/<?= $this->config->config_entry('main|template'); ?>/css/infobase-theme.css" type="text/css"/>
 */

:root{
  --ib-bg:#0f1115;
  --ib-bg2:#151823;
  --ib-panel:#121621;
  --ib-card:#10131a;
  --ib-border:#262a35;
  --ib-border2: rgba(255,255,255,.06);
  --ib-text:#e8eaed;
  --ib-muted:#9aa0a6;
  --ib-faint: rgba(232,234,237,.55);
  --ib-accent:#4c8dff;              /* launcher blue */
  --ib-accentSoft: rgba(76,141,255,.14);
  --ib-accentSoft2: rgba(76,141,255,.08);
  --ib-accentLine: rgba(76,141,255,.55);
  --ib-accentGlow: rgba(76,141,255,.35);
  --ib-shadow: 0 14px 40px rgba(0,0,0,.55);
  --ib-shadow2: 0 10px 26px rgba(0,0,0,.45);
  --ib-radius: 16px;
  --ib-radius2: 12px;
  --ib-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{ box-sizing:border-box; }
html{ scrollbar-gutter: stable; }
html,body{ height:100%; }
body{
  font-family: var(--ib-font) !important;
  color: var(--ib-text) !important;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(76,141,255,.10), transparent 58%),
    radial-gradient(820px 540px at 88% 2%, rgba(76,141,255,.06), transparent 60%),
    linear-gradient(180deg, var(--ib-bg), var(--ib-bg2)) !important;
  background-attachment: fixed !important;
}

/* Respect your video background if it exists, but keep palette consistent */
.video-overlay{ background: rgba(0,0,0,0.45) !important; }

a{ color: rgba(232,234,237,.92) !important; }
a:hover{ color:#fff !important; text-decoration:none; }
::selection{ background: rgba(76,141,255,.28); }

/* --- Top navigation (bg-nav + header links) --- */
.bg-nav{
  background: rgba(15,17,21,.72) !important;
  border-bottom: 1px solid var(--ib-border2) !important;
  backdrop-filter: blur(10px);
}

.header-nav{
  gap: 18px !important;
  padding: 10px 12px !important;
}

.header-nav li a{
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  border: 1px solid var(--ib-border2);
  background: rgba(15,17,21,.62);
  border-radius: 12px;
  padding: 8px 12px !important;
  text-shadow: none !important;
  transform: none !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.header-nav li a::after{ display:none !important; }
.header-nav li a:hover{
  background: rgba(76,141,255,.06) !important;
  border-color: rgba(76,141,255,.95) !important;
  color:#fff !important;
  box-shadow:
    0 0 0 1px rgba(76,141,255,.35) inset,
    0 0 18px rgba(76,141,255,.18);
}
.header-nav li a:active{ transform: translateY(1px) !important; }

/* --- Common panels/cards --- */
.control-panel,
.information,
.ncontent,
.content-block,
.loginnow,
#select_server,
#loading,
.box-style1 .title,
.box-style4 .title{
  background: rgba(14,18,26,.92) !important;
  border: 1px solid var(--ib-border2) !important;
  border-radius: var(--ib-radius2) !important;
  box-shadow: var(--ib-shadow2) !important;
}

/* Sidebar blocks */
.sidebar .heading{
  width: auto !important;
  display:block !important;
  padding: 14px 14px !important;
  height: auto !important;
  line-height: 1.2 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(232,234,237,.92) !important;
  text-shadow: none !important;
}

/* Inside sidebar links */
.ra a,
.ra2,
.ra2 span{ color: rgba(232,234,237,.86) !important; }
.ra a:hover{ color:#fff !important; }

/* Make all small server-switch badges consistent */
.sidebar a[style*="background"],
#top_players a[style*="background"],
#top_guilds a[style*="background"]{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ib-border2) !important;
  border-radius: 10px !important;
  color: rgba(232,234,237,.86) !important;
}
.sidebar a[style*="background"]:hover,
#top_players a[style*="background"]:hover,
#top_guilds a[style*="background"]:hover{
  border-color: rgba(76,141,255,.95) !important;
  background: rgba(76,141,255,.06) !important;
  box-shadow: 0 0 0 1px rgba(76,141,255,.22) inset;
  color:#fff !important;
}

/* --- Main content typography --- */
.title{
  margin: 16px 0 10px !important;
  padding: 12px 14px !important;
  border-radius: var(--ib-radius2) !important;
  background: rgba(14,18,26,.86) !important;
  border: 1px solid var(--ib-border2) !important;
  color: rgba(232,234,237,.94) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

.text,
.entry,
.ncontent{
  color: rgba(232,234,237,.86) !important;
}

.text p{ line-height: 1.55; }

/* --- Forms / inputs --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea,
.ao{
  background: rgba(255,255,255,.03) !important;
  color: var(--ib-text) !important;
  border: 1px solid var(--ib-border2) !important;
  border-radius: 12px !important;
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus,
.ao:focus{
  border-color: rgba(76,141,255,.35) !important;
  box-shadow: 0 0 0 2px rgba(76,141,255,.10) !important;
}

/* fix form text colors that were dark */
.form input:not(.btn-orange2){ color: var(--ib-text) !important; }

/* --- Buttons (unify to launcher-blue outline) --- */
.btn,
.btn2,
.btn-enter,
.button-style,
.btn-orange,
.btn-orange2,
.regbutton,
.chbutton,
.repassbutton{
  background: rgba(15,17,21,.62) !important;
  border: 1px solid var(--ib-border2) !important;
  color: rgba(232,234,237,.90) !important;
  border-radius: 12px !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.btn:hover,
.btn2:hover,
.btn-enter:hover,
.button-style:hover,
.btn-orange:hover,
.btn-orange2:hover,
.regbutton:hover,
.chbutton:hover,
.repassbutton:hover{
  background: rgba(76,141,255,.06) !important;
  border-color: rgba(76,141,255,.95) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(76,141,255,.35) inset,
    0 0 18px rgba(76,141,255,.18);
}

.btn:active,
.btn2:active,
.btn-enter:active,
.button-style:active{ transform: translateY(1px) !important; }

/* --- Tables (rankings etc.) --- */
table{
  color: rgba(232,234,237,.88);
}
.table,
.ranking-table,
.header-ranking-table{
  background: rgba(14,18,26,.85) !important;
  border: 1px solid var(--ib-border2) !important;
  border-radius: var(--ib-radius2) !important;
  overflow: hidden;
}

.ranking-table tr:nth-child(odd){ background: rgba(255,255,255,.03) !important; }
.ranking-table tr:hover{ background: rgba(76,141,255,.06) !important; }

/* --- Modal overlay login --- */
.overlay{ background: rgba(0,0,0,.70) !important; }
.loginnow{
  background: rgba(14,18,26,.92) !important;
  width: 360px !important;
  height: auto !important;
  padding: 18px 18px 16px !important;
}

/* Icons in login overlay */
.loginnow .icon-user,
.loginnow .icon-lock{ color: var(--ib-faint) !important; }

/* Footer */
.footer{
  background: rgba(15,17,21,.70) !important;
  border-top: 1px solid var(--ib-border2) !important;
}

/* Minor: reduce aggressive scaling on hover for non-button links (keeps UI stable) */
a:not(.btn):not(.btn-quickstart):not(.btn-support):not(.btn-donate):not(.btn-tweet):hover{
  transform: none !important;
}

/* Scrollbar (Chromium) */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; border: 2px solid rgba(0,0,0,0); background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(76,141,255,.28); border: 2px solid rgba(0,0,0,0); background-clip: padding-box; }
  ::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); }
}