/* REALBOYS Ecosystem Portal 2026
   PHP 7.4 safe visual layer for UniGameCMS
*/
:root{
  --rb-bg:#070b12;
  --rb-bg-soft:#0e141f;
  --rb-panel:#111827;
  --rb-panel-2:#151d2d;
  --rb-border:#243245;
  --rb-border-strong:#344965;
  --rb-text:#edf3ff;
  --rb-muted:#a4b4c9;
  --rb-accent:#ec314a;
  --rb-accent-2:#ff6b80;
  --rb-blue:#55a7ff;
  --rb-green:#44d37e;
  --rb-gold:#f4bc4d;
  --rb-shadow:0 14px 34px rgba(0,0,0,.28);
}

html,body{
  background: radial-gradient(circle at 0% 60%, rgba(236,49,74,.18), transparent 35%),
              radial-gradient(circle at 100% 0%, rgba(45,120,255,.20), transparent 32%),
              linear-gradient(135deg,#071019 0%,#10172a 55%,#141222 100%);
  color:var(--rb-text);
}

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.rb-site-shell .content,
.wapper .content{
  background: transparent !important;
}

.rb-site-shell .container,
.wapper .container{
  max-width: 1380px;
}

.header{
  position:sticky;
  top:0;
  z-index:1050;
  backdrop-filter: blur(10px);
  background: rgba(6,10,16,.86) !important;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.header .container{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  min-height:86px;
}
.header .logo img{
  max-height:58px;
  width:auto;
}
.header .auth-in,
.header .auth-up{
  display:none !important;
}

.collapsible-menu{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.collapsible-menu > li{
  position:relative;
}
.collapsible-menu > li > a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 18px;
  min-height:52px;
  border-radius:18px;
  background:rgba(16,22,34,.92);
  border:1px solid var(--rb-border);
  color:#f3f6ff !important;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
  transition:.2s ease;
}
.collapsible-menu > li > a:hover,
.collapsible-menu > li.open > a{
  border-color:rgba(236,49,74,.65);
  box-shadow:0 0 0 1px rgba(236,49,74,.18), 0 10px 24px rgba(0,0,0,.25);
  transform:translateY(-1px);
}
.collapsible-menu li ul,
.collapsible-menu .dropdown-menu{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  min-width:250px;
  padding:10px;
  border-radius:18px;
  background:#101722;
  border:1px solid var(--rb-border-strong);
  box-shadow:var(--rb-shadow);
  z-index:1065;
}
.collapsible-menu li ul li a,
.collapsible-menu .dropdown-menu a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  color:var(--rb-text) !important;
  text-decoration:none;
}
.collapsible-menu li ul li a:hover,
.collapsible-menu .dropdown-menu a:hover{
  background:#192233;
}
.navigation{
  margin-bottom:24px;
  background:linear-gradient(90deg,rgba(236,49,74,.18),rgba(25,31,49,.65));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navigation .breadcrumb{
  background:none;
  padding:16px 0;
  margin:0;
  color:var(--rb-muted);
}

.rb-shell-page{
  padding-bottom:36px;
}

/* Reusable cards */
.rb-card,
.block,
.table,
.forum,
.widget,
.profile,
.ticket-item{
  background:rgba(16,21,32,.92);
  border:1px solid var(--rb-border-strong);
  border-radius:24px;
  box-shadow:var(--rb-shadow);
}
.block{
  overflow:hidden;
}
.block .block_head{
  background:rgba(255,255,255,.03);
  color:#fff;
  font-weight:800;
  font-size:28px;
  padding:20px 26px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.block > *:not(.block_head){ color:var(--rb-text); }
.block p,.block td,.block li,.table td,.table th{ color:var(--rb-text); }
.block a,.table a,.forum a{ color:#8dbfff; }
.block a:hover,.table a:hover,.forum a:hover{ color:#cfe4ff; }

.btn,
button,
input[type=submit]{
  border-radius:16px !important;
}
.btn-primary{
  background:linear-gradient(180deg,#ff5069,#db2944) !important;
  border-color:#ff7184 !important;
  color:#fff !important;
}
.btn-outline-primary{
  background:#121b2a !important;
  border-color:#33455f !important;
  color:#fff !important;
}
.btn-outline-primary:hover{
  background:#1a2434 !important;
}

/* Homepage */
.rb-home{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.rb-hero{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap:32px;
  min-height:520px;
  padding:40px;
  border-radius:34px;
  border:1px solid var(--rb-border-strong);
  background:
    linear-gradient(90deg, rgba(8,12,18,.86), rgba(8,12,18,.35)),
    url('../img/rb-hero-bg.png') center/cover no-repeat;
  box-shadow:var(--rb-shadow);
  overflow:hidden;
}
.rb-hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 90%, rgba(236,49,74,.24), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(85,167,255,.20), transparent 24%);
  pointer-events:none;
}
.rb-hero-left,.rb-hero-right{ position:relative; z-index:2; }
.rb-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px;
  background:rgba(26,22,35,.88);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  color:#ffd3db;
  font-weight:700;
  margin-bottom:20px;
}
.rb-title{
  font-size:72px; line-height:.98; margin:0 0 18px; color:#fff; font-weight:900;
}
.rb-lead{
  font-size:24px; line-height:1.55; color:#dbe3ef; max-width:760px; margin-bottom:28px;
}
.rb-hero-actions{
  display:flex; flex-wrap:wrap; gap:14px;
}
.rb-button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 22px;
  border-radius:18px; text-decoration:none !important;
  font-weight:800; transition:.2s ease;
}
.rb-button.primary{
  color:#fff;
  background:linear-gradient(180deg,#ff576f,#e22d48);
  border:1px solid #ff7c8e;
}
.rb-button.secondary{
  color:#fff;
  background:#121b2a;
  border:1px solid #33455f;
}
.rb-button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.2); }

.rb-hero-stats{
  display:grid; gap:16px;
  align-content:end;
}
.rb-stat{
  padding:20px 24px;
  background:rgba(21,28,41,.66);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
}
.rb-stat span{
  display:block; font-size:16px; color:var(--rb-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.08em;
}
.rb-stat strong{
  display:block; font-size:44px; color:#fff;
}

.rb-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.rb-section h2{
  margin:0;
  font-size:42px;
  color:#fff;
}
.rb-section .rb-kicker{
  color:var(--rb-accent-2);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.12em;
  font-size:14px;
}
.rb-link-more{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff; background:#151d2b; border:1px solid #354660; padding:14px 18px; border-radius:16px;
}

.rb-auth-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:24px;
}
.rb-auth-card,
.rb-panel{
  background:rgba(16,21,32,.92);
  border:1px solid var(--rb-border-strong);
  border-radius:28px;
  box-shadow:var(--rb-shadow);
  overflow:hidden;
}
.rb-auth-card .block,
.rb-auth-card .block_head{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.rb-auth-card{ padding:28px; }
.rb-auth-card .block_head{ padding:0 0 16px !important; font-size:30px !important; }
.rb-auth-card .btn{ min-height:52px; font-size:18px; font-weight:700; }
.rb-auth-card p{ color:var(--rb-muted); }

.rb-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.rb-grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }

.rb-feature-card{
  position:relative;
  min-height:188px;
  padding:24px;
  border-radius:26px;
  overflow:hidden;
  background:#121a27;
  border:1px solid var(--rb-border-strong);
  box-shadow:var(--rb-shadow);
}
.rb-feature-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34;
}
.rb-feature-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,10,16,.15),rgba(7,10,16,.8));
}
.rb-feature-card .content{
  position:relative; z-index:2;
}
.rb-feature-card h3{
  font-size:28px; margin:0 0 12px; color:#fff;
}
.rb-feature-card p{ color:#d6dfed; line-height:1.6; }
.rb-feature-card a{
  display:inline-flex; margin-top:18px; color:#fff; text-decoration:none; font-weight:700;
}

.rb-news-card{
  background:#101724;
  border:1px solid var(--rb-border-strong);
  border-radius:26px; overflow:hidden;
  box-shadow:var(--rb-shadow);
}
.rb-news-card img{
  width:100%; height:220px; object-fit:cover; display:block;
}
.rb-news-card .body{ padding:20px; }
.rb-news-card h3{ margin:0 0 10px; font-size:28px; color:#fff; }
.rb-news-card p{ color:#ccd7e6; line-height:1.6; margin:0 0 12px; }
.rb-news-card .meta{ color:var(--rb-muted); font-size:15px; }

.rb-quick-links{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}
.rb-quick-link{
  display:block; text-decoration:none !important; color:#fff;
  padding:22px; border-radius:22px;
  background:rgba(16,21,32,.92);
  border:1px solid var(--rb-border-strong);
}
.rb-quick-link strong{ display:block; font-size:24px; margin-bottom:8px; }
.rb-quick-link span{ color:var(--rb-muted); }

/* Monitoring */
.monitoring,
.rb-monitoring-wrap{
  background:rgba(13,19,30,.88);
  border:1px solid var(--rb-border-strong);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--rb-shadow);
  padding:16px;
}
#servers{
  width:100%;
}
.server{
  background:#0f1725;
  border:1px solid #34465f;
  border-radius:24px;
  padding:18px;
  box-shadow:var(--rb-shadow);
}
.monitoring table, .table.table-hover, table{
  width:100%;
}
.monitoring_table table,
.monitoring table{
  border-collapse:separate;
  border-spacing:0;
}
.monitoring_table thead td,
.monitoring_table thead th,
thead td, thead th{
  background:#141d2c;
  color:#ffd34c;
  font-weight:800;
  padding:16px 14px;
}
.monitoring_table tbody td,
tbody td{
  background:rgba(16,21,32,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:14px 14px;
}
.monitoring_table tbody tr:hover td{ background:#172132; }

.rb-copy-ip{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:#121b2a; border:1px solid #31435c; color:#fff;
  cursor:pointer;
}

/* Internal pages */
.row .col-lg-3 .block,
.row .col-lg-9 .block,
.row .col-lg-8 .block,
.row .col-lg-4 .block,
.row .col-lg-12 .block{
  margin-bottom:24px;
}
.vertical-navigation ul,
.nav.flex-column{
  list-style:none;
  margin:0; padding:12px;
}
.vertical-navigation ul li a,
.nav.flex-column a{
  display:block; padding:14px 16px; border-radius:14px; color:#dce6f5; text-decoration:none;
}
.vertical-navigation ul li a:hover,
.nav.flex-column a:hover{
  background:#172132;
}
.footer{
  margin-top:36px;
  background:rgba(6,10,16,.92);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer .container{
  padding-top:34px;
  padding-bottom:34px;
}
.footer p,.footer a,.footer li{ color:#c4d0df !important; }
.footer img{ max-width:220px; }

/* Responsive */
@media (max-width: 1199px){
  .rb-hero{ grid-template-columns:1fr; min-height:auto; }
  .rb-auth-grid,.rb-grid-3,.rb-grid-4,.rb-quick-links{ grid-template-columns:1fr 1fr; }
  .rb-title{ font-size:58px; }
}
@media (max-width: 767px){
  .header .container{ min-height:unset; padding-top:10px; padding-bottom:10px; }
  .collapsible-menu{ gap:8px; }
  .collapsible-menu > li > a{ min-height:46px; padding:12px 14px; font-size:14px; }
  .rb-hero{ padding:24px; border-radius:26px; }
  .rb-title{ font-size:40px; }
  .rb-lead{ font-size:18px; }
  .rb-section h2{ font-size:30px; }
  .rb-auth-grid,.rb-grid-3,.rb-grid-4,.rb-quick-links{ grid-template-columns:1fr; }
}



/* =========================================================
   REALBOYS HEADER PROFILE + DROPDOWN HARD FIX
   Fixes:
   - menu buttons fitting in one header
   - profile block no longer falls below navigation
   - dropdown submenu appears above content
   - no global style redesign
   ========================================================= */

.header,
.header * {
  box-sizing: border-box;
}

.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
  min-height: 82px;
}

.header .container {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 82px !important;
  overflow: visible !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.header .logo,
.header a.logo {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.header .logo img,
.header a.logo img,
.header img[src*="logo"] {
  max-height: 58px !important;
  width: auto !important;
  object-fit: contain !important;
}

.header #hidden-menu,
.header .rb-header-menu,
.header .collapse {
  grid-column: 2 !important;
  position: static !important;
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

.header .collapsible-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.header .collapsible-menu > li {
  position: relative !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.header .collapsible-menu > li > a {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 15px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 50px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 148px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

/* Dropdowns must open over page, not push layout */
.header .collapsible-menu li ul,
.header .collapsible-menu .dropdown-menu,
.header .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  display: none;
  min-width: 240px !important;
  max-width: 320px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: #101722 !important;
  border: 1px solid #344965 !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
  z-index: 100050 !important;
  transform: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

.header .collapsible-menu li:hover > ul,
.header .collapsible-menu li:hover > .dropdown-menu,
.header .collapsible-menu li.open > ul,
.header .collapsible-menu li.open > .dropdown-menu,
.header .dropdown.show > .dropdown-menu,
.header .dropdown-menu.show {
  display: block !important;
}

.header .collapsible-menu li ul li,
.header .dropdown-menu li {
  display: block !important;
  width: 100% !important;
}

.header .collapsible-menu li ul li a,
.header .dropdown-menu a {
  display: block !important;
  width: 100% !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  color: #edf3ff !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Profile/user block: catch common UniGameCMS variants */
.header .user,
.header .profile,
.header .profile-mini,
.header .user-panel,
.header .user-menu,
.header .user_block,
.header .user-block,
.header .account,
.header .account-menu,
.header .login,
.header .auth_user,
.header .auth-user,
.header [class*="profile"],
.header [class*="user"] {
  max-width: 190px;
}

/* Direct children after menu usually contain the profile in this template */
.header .container > .profile,
.header .container > .user,
.header .container > .profile-mini,
.header .container > .user-panel,
.header .container > .user-menu,
.header .container > .account,
.header .container > .auth_user,
.header .container > .auth-user,
.header .container > div:not(#hidden-menu):not(.clearfix):not(.logo):last-child {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 100030 !important;
}

/* If profile is generated inside UL as last menu item */
.header .collapsible-menu > li:last-child:has(img),
.header .collapsible-menu > li[class*="profile"],
.header .collapsible-menu > li[class*="user"] {
  margin-left: auto !important;
}

.header .collapsible-menu img,
.header img.avatar,
.header .avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* Prevent page content from covering dropdowns */
.wapper,
.content,
.rb-site-shell,
.rb-shell-page,
.navigation,
.container,
.row,
.block,
.rb-panel,
.monitoring,
.table-responsive {
  overflow: visible;
}

.navigation {
  position: relative !important;
  z-index: 1 !important;
}

/* Wide screens: keep header compact */
@media (max-width: 1500px) {
  .header .container {
    max-width: 1320px !important;
  }
  .header .collapsible-menu {
    gap: 7px !important;
  }
  .header .collapsible-menu > li > a {
    max-width: 132px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 1280px) {
  .header .container {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .header .logo,
  .header a.logo {
    grid-column: 1 !important;
    justify-content: center !important;
  }
  .header #hidden-menu,
  .header .rb-header-menu,
  .header .collapse {
    grid-column: 1 !important;
  }
  .header .collapsible-menu {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .header .collapsible-menu > li > a {
    max-width: none !important;
  }
  .header .container > .profile,
  .header .container > .user,
  .header .container > .profile-mini,
  .header .container > .user-panel,
  .header .container > .user-menu,
  .header .container > .account,
  .header .container > .auth_user,
  .header .container > .auth-user,
  .header .container > div:not(#hidden-menu):not(.clearfix):not(.logo):last-child {
    grid-column: 1 !important;
    justify-self: center !important;
  }
}

@media (max-width: 991px) {
  .header {
    position: relative !important;
  }
  .header .container {
    display: block !important;
    min-height: auto !important;
  }
  .header #hidden-menu.collapse,
  .header .collapse {
    display: none !important;
  }
  .header #hidden-menu.collapse.show,
  .header .collapse.show {
    display: block !important;
  }
  .header .collapsible-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    margin-top: 12px !important;
  }
  .header .collapsible-menu > li > a {
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  .header .collapsible-menu li ul,
  .header .collapsible-menu .dropdown-menu,
  .header .dropdown-menu {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 8px !important;
  }
}