/* JP WoW Realm visual system — first pass based on the approved admin mockup direction. */

:root{
  --realm-bg:#050d17;
  --realm-bg-deep:#020810;
  --realm-panel:#081827;
  --realm-panel-2:#0c2135;
  --realm-panel-3:#102b43;
  --realm-panel-inset:#04111d;
  --realm-border:#295477;
  --realm-border-soft:#183652;
  --realm-cyan:#69c7ff;
  --realm-blue:#1399ff;
  --realm-blue-deep:#07579a;
  --realm-gold:#b99a58;
  --realm-gold-soft:#685a39;
  --realm-text:#eff7ff;
  --realm-muted:#8da9c2;
}

/* ----- global portal chrome ----- */
body:not(.auth-locked){background:var(--realm-bg-deep)}
body:not(.auth-locked) .portal-app{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% -18%,rgba(32,134,211,.28),transparent 42%),
    radial-gradient(ellipse at 0 42%,rgba(10,78,131,.18),transparent 32%),
    radial-gradient(ellipse at 100% 42%,rgba(18,78,129,.18),transparent 32%),
    linear-gradient(180deg,#07131f 0%,#050d17 32%,#040b13 100%);
}
body:not(.auth-locked) .portal-app::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,47,76,.22),transparent 15%,transparent 85%,rgba(12,47,76,.22)),
    radial-gradient(circle at 50% 8%,rgba(75,180,255,.08),transparent 28%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(89,145,190,.018) 80px);
}

.topbar{
  min-height:66px;
  padding:8px max(24px,calc((100vw - 1220px)/2));
  background:
    linear-gradient(180deg,rgba(4,19,33,.98),rgba(5,22,38,.94)),
    radial-gradient(circle at 50% 0,rgba(36,130,196,.18),transparent 50%);
  border-bottom:1px solid var(--realm-gold-soft);
  box-shadow:0 8px 30px rgba(0,0,0,.32),0 1px 0 rgba(94,181,238,.18) inset;
  backdrop-filter:blur(18px) saturate(1.1);
}
.topbar::after{
  content:"";
  position:absolute;
  left:max(24px,calc((100vw - 1220px)/2));
  right:max(24px,calc((100vw - 1220px)/2));
  bottom:-2px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--realm-blue),var(--realm-gold),var(--realm-blue),transparent);
  opacity:.58;
}
.topbar .brand{
  gap:12px;
  color:#f4ead3;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-shadow:0 1px 0 #000,0 0 18px rgba(99,187,255,.13);
}
.topbar .brand img{
  width:42px!important;height:42px!important;border-radius:7px!important;
  border:1px solid rgba(185,154,88,.72);
  box-shadow:0 0 0 2px rgba(15,45,71,.8),0 0 18px rgba(33,144,224,.2);
}
.topbar nav{gap:6px}
.topbar nav a,
.topbar #adminButton,
.topbar #logoutButton{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:4px;
  color:#a9bdd1;
  background:transparent;
  font-weight:760;
  transition:.15s ease;
}
.topbar nav a:hover,
.topbar #adminButton:hover,
.topbar #logoutButton:hover{
  color:#eef8ff;
  border-color:#264d6e;
  background:linear-gradient(180deg,rgba(17,51,78,.8),rgba(8,29,48,.84));
}
.topbar nav a.active,
body.admin-page-active .topbar #adminButton{
  color:#fff;
  border-color:#69c8ff;
  background:linear-gradient(180deg,#167bc2 0%,#0b568e 48%,#083e68 100%);
  box-shadow:0 0 0 1px rgba(5,22,36,.9) inset,0 0 18px rgba(43,159,237,.42),0 0 32px rgba(28,112,177,.2);
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.topbar nav a.active::after{display:none}
.topbar #portalUserLabel{padding:0 6px;color:#7190aa}

/* ----- admin page world frame ----- */
body.admin-page-active #portalApp main{
  max-width:1240px;
  padding:38px 28px 78px;
}
.admin-page-active #adminDialog .dialog-head{
  position:relative;
  min-height:106px;
  padding:22px 26px 20px 92px!important;
  border:1px solid var(--realm-border)!important;
  border-bottom-color:var(--realm-gold-soft)!important;
  border-radius:8px 8px 0 0;
  background:
    radial-gradient(circle at 76% 18%,rgba(52,151,219,.18),transparent 28%),
    linear-gradient(180deg,rgba(9,35,57,.97),rgba(6,24,40,.98));
  box-shadow:inset 0 1px 0 rgba(118,196,245,.1),0 18px 36px rgba(0,0,0,.22);
}
.admin-page-active #adminDialog .dialog-head::before{
  content:"⚙";
  position:absolute;
  left:24px;top:21px;
  width:50px;height:50px;
  display:grid;place-items:center;
  border:1px solid #4f92bf;
  border-radius:50%;
  background:radial-gradient(circle,#113d61,#071827 67%);
  color:#84d8ff;
  font-size:1.65rem;
  text-shadow:0 0 16px rgba(75,190,255,.7);
  box-shadow:0 0 0 3px rgba(185,154,88,.2),0 0 20px rgba(30,146,222,.25);
}
.admin-page-active #adminDialog .dialog-head::after{
  content:"";
  position:absolute;left:24px;right:24px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#8e7847 12%,#39aef3 50%,#8e7847 88%,transparent);
  opacity:.8;
}
.admin-page-active #adminDialog .dialog-head .eyebrow{
  color:#84d6ff;
  letter-spacing:.2em;
  margin-bottom:3px;
}
.admin-page-active #adminDialog .dialog-head h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.1rem,4vw,3rem)!important;
  letter-spacing:.01em;
  color:#f3ead9;
  text-shadow:0 2px 0 #000,0 0 22px rgba(65,169,237,.1);
}
.admin-hero-subtitle{
  margin:4px 0 0;
  color:#9eb8d0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.03rem;
}

/* ----- main admin navigation ----- */
.admin-page-active .admin-section-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin:10px 0 26px;
  padding:5px;
  border:1px solid #755f34;
  border-radius:7px;
  background:#061320;
  box-shadow:inset 0 0 0 1px rgba(48,107,147,.4),0 12px 30px rgba(0,0,0,.23);
}
.admin-page-active .admin-section-tab{
  position:relative;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #244c6a;
  border-radius:4px;
  background:linear-gradient(180deg,#0c2942 0%,#071c2f 100%);
  color:#b8cadd;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.02rem;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(129,194,234,.07);
}
.admin-page-active .admin-section-tab::before{
  width:30px;
  color:#7bcfff;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:1.35rem;
  text-align:center;
  text-shadow:0 0 14px rgba(57,171,241,.5);
}
.admin-page-active .admin-section-tab:nth-child(1)::before{content:"♟"}
.admin-page-active .admin-section-tab:nth-child(2)::before{content:"▤"}
.admin-page-active .admin-section-tab:nth-child(3)::before{content:"◆"}
.admin-page-active .admin-section-tab:nth-child(4)::before{content:"▦"}
.admin-page-active .admin-section-tab:nth-child(5)::before{content:"≡"}
.admin-page-active .admin-section-tab:hover:not(:disabled){
  color:#eff9ff;
  border-color:#3b82ad;
  background:linear-gradient(180deg,#103959,#0a2942);
}
.admin-page-active .admin-section-tab.active{
  color:#fff;
  border-color:#70d0ff;
  background:linear-gradient(180deg,#1389d4 0%,#0869ae 44%,#064875 100%);
  box-shadow:inset 0 0 0 1px rgba(209,241,255,.15),0 0 18px rgba(44,170,247,.46),0 0 34px rgba(23,109,177,.23);
  text-shadow:0 1px 0 rgba(0,0,0,.65);
}
.admin-page-active .admin-section-tab.active::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-5px;height:2px;
  background:linear-gradient(90deg,transparent,#d1ae62,#5cc8ff,#d1ae62,transparent);
  box-shadow:0 0 9px rgba(78,194,255,.75);
}
.admin-page-active .admin-section-tab:disabled{opacity:.35;filter:saturate(.55)}

/* ----- section heading ----- */
.admin-page-active .admin-list-head{
  position:relative;
  padding:16px 18px 14px 64px;
  margin:0 0 14px;
  border:1px solid #244a67;
  border-radius:6px;
  background:linear-gradient(180deg,rgba(9,31,50,.94),rgba(6,23,38,.96));
}
.admin-page-active .admin-list-head::before{
  content:"♟";
  position:absolute;left:18px;top:17px;
  width:34px;height:34px;display:grid;place-items:center;
  color:#6dccff;font-size:1.45rem;
  border:1px solid #2d6288;border-radius:5px;
  background:#081b2c;
  box-shadow:0 0 14px rgba(42,153,219,.12);
}
.admin-page-active .admin-list-head .eyebrow{color:#68c7ff;margin-bottom:4px}
.admin-page-active .admin-list-head h3{
  margin:0 0 3px;
  color:#f2eadc;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.6rem;
}

/* ----- account list and detail frame ----- */
.admin-page-active #adminAccountsPanel .admin-account-list{gap:9px}
.admin-page-active #adminAccountsPanel .admin-account-row{
  position:relative;
  overflow:hidden;
  border:1px solid #315a79!important;
  border-radius:6px!important;
  background:#071521!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
.admin-page-active #adminAccountsPanel .admin-account-row::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,#836d3f 15%,#3f8ebf 50%,#836d3f 85%,transparent);
  opacity:.8;
}
.admin-page-active #adminAccountsPanel .admin-account-summary{
  min-height:58px;
  padding:12px 15px!important;
  background:linear-gradient(180deg,#0b2032 0%,#081724 100%)!important;
  border-bottom:0;
}
.admin-page-active #adminAccountsPanel .admin-account-row:not(:has(.admin-account-details.hidden)) .admin-account-summary{
  background:linear-gradient(180deg,#0d2940 0%,#0a1d2e 100%)!important;
  box-shadow:inset 0 -1px 0 rgba(69,146,194,.2);
}
.admin-page-active #adminAccountsPanel .admin-account-name strong{
  color:#f4eee2;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
  letter-spacing:.025em;
}
.admin-page-active #adminAccountsPanel .admin-account-details{
  padding:18px!important;
  gap:14px!important;
  border-top:1px solid #315675!important;
  background:
    linear-gradient(180deg,rgba(14,41,62,.97),rgba(8,28,44,.98)),
    radial-gradient(circle at 72% 15%,rgba(26,112,170,.12),transparent 35%)!important;
  box-shadow:inset 0 1px 0 rgba(117,187,230,.035);
}
.admin-page-active #adminAccountsPanel .admin-account-meta{
  padding:0 0 4px;
  color:#8da8c0!important;
  letter-spacing:.02em;
}

/* segmented tabs inside one account */
.admin-page-active #adminAccountsPanel .admin-account-inner-tabs{
  padding:4px!important;
  margin:0 0 18px!important;
  border:1px solid #315878!important;
  border-radius:5px!important;
  background:#05131f!important;
}
.admin-page-active #adminAccountsPanel .admin-account-inner-tabs .btn{
  min-height:38px!important;
  border-radius:3px!important;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
}
.admin-page-active #adminAccountsPanel .admin-account-inner-tabs .btn:hover{
  background:#0c2a42!important;
}
.admin-page-active #adminAccountsPanel .admin-account-inner-tab.active{
  color:#f7fbff!important;
  background:linear-gradient(180deg,#107bbb,#075b91)!important;
  box-shadow:inset 0 0 0 1px rgba(160,220,255,.13),0 0 12px rgba(39,162,235,.28)!important;
}

/* fields */
.admin-page-active #adminAccountsPanel .admin-account-details label{
  color:#dce9f4;
  font-weight:760;
}
.admin-page-active #adminAccountsPanel .admin-account-details input,
.admin-page-active #adminAccountsPanel .admin-account-details select,
.admin-page-active #adminAccountsPanel .admin-account-details textarea{
  min-height:40px;
  background:linear-gradient(180deg,#06121d,#04101a)!important;
  border:1px solid #2f5774!important;
  border-radius:4px!important;
  color:#f2f7fb;
  box-shadow:inset 0 1px 6px rgba(0,0,0,.42);
}
.admin-page-active #adminAccountsPanel .admin-account-details input:focus,
.admin-page-active #adminAccountsPanel .admin-account-details select:focus,
.admin-page-active #adminAccountsPanel .admin-account-details textarea:focus{
  border-color:#62c3fa!important;
  box-shadow:inset 0 1px 6px rgba(0,0,0,.35),0 0 0 2px rgba(35,154,224,.14),0 0 12px rgba(35,154,224,.15)!important;
}
.admin-page-active #adminAccountsPanel .registration-note-admin,
.admin-page-active #adminAccountsPanel .gm-level-help{
  border:1px solid #315878!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#0a2032,#071826)!important;
}
.admin-page-active #adminAccountsPanel .gm-level-help summary{color:#71c8f8}

/* buttons — realm controls */
.admin-page-active #adminAccountsPanel .btn,
.admin-page-active #adminServerPanel .btn,
.admin-page-active #adminContentPanel .btn{
  min-height:40px;
  border-radius:4px!important;
  border:1px solid #35617f;
  background:linear-gradient(180deg,#102d45 0%,#0a2033 100%);
  color:#edf7ff;
  box-shadow:inset 0 1px 0 rgba(151,210,246,.06),0 5px 14px rgba(0,0,0,.13);
  text-shadow:0 1px 0 rgba(0,0,0,.7);
  transition:.15s ease;
}
.admin-page-active #adminAccountsPanel .btn:hover:not(:disabled),
.admin-page-active #adminServerPanel .btn:hover:not(:disabled),
.admin-page-active #adminContentPanel .btn:hover:not(:disabled){
  border-color:#55a4d2;
  background:linear-gradient(180deg,#164063,#0d2a42);
  box-shadow:inset 0 1px 0 rgba(175,224,250,.08),0 0 14px rgba(49,160,225,.16),0 7px 16px rgba(0,0,0,.14);
  transform:translateY(-1px);
}
.admin-page-active #adminAccountsPanel .btn.primary,
.admin-page-active #adminServerPanel .btn.primary,
.admin-page-active #adminContentPanel .btn.primary{
  border-color:#63c8ff;
  background:linear-gradient(180deg,#1598e7 0%,#0871bb 52%,#075084 100%);
  box-shadow:inset 0 1px 0 rgba(226,247,255,.18),0 0 16px rgba(43,171,246,.27),0 8px 20px rgba(0,0,0,.18);
}
.admin-page-active #adminAccountsPanel .btn.danger,
.admin-page-active #adminAccountsPanel .character-delete-account-direct{
  border-color:#86414a!important;
  background:linear-gradient(180deg,#54232a,#38171c)!important;
  color:#ffc0c4!important;
  box-shadow:inset 0 1px 0 rgba(255,223,226,.04),0 5px 14px rgba(45,7,11,.2)!important;
}
.admin-page-active #adminAccountsPanel .btn.danger:hover,
.admin-page-active #adminAccountsPanel .character-delete-account-direct:hover{
  border-color:#ba5662!important;
  background:linear-gradient(180deg,#692c35,#481d24)!important;
}
.admin-page-active #adminAccountsPanel .admin-account-actions{
  align-items:stretch!important;
  gap:9px!important;
  margin-top:17px!important;
}
.admin-page-active #adminAccountsPanel .admin-account-actions .btn,
.admin-page-active #adminAccountsPanel .admin-game-access-action,
.admin-page-active #adminAccountsPanel .admin-toggle-game{
  align-self:stretch!important;
  margin:0!important;
  transform:none!important;
}

/* status chips */
.admin-page-active #adminAccountsPanel .admin-account-status-ok{
  color:#7cf0b4!important;
  border-color:#2f7a57!important;
  background:linear-gradient(180deg,#12472f,#0d3323)!important;
  box-shadow:0 0 10px rgba(33,166,103,.09);
}
.admin-page-active #adminAccountsPanel .admin-account-status-bad{
  color:#ffb0b8!important;
  border-color:#8b3c47!important;
  background:linear-gradient(180deg,#542029,#39171d)!important;
}
.admin-page-active #adminAccountsPanel .pill:not(.admin-account-status-ok):not(.admin-account-status-bad){
  border:1px solid #24557a;
  background:#0c3150;
  color:#8fd3ff;
}

/* danger area */
.admin-page-active #adminAccountsPanel .admin-account-general-danger{
  position:relative;
  margin-top:23px!important;
  padding:15px!important;
  border:1px solid rgba(151,61,71,.35)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(77,25,31,.15),rgba(41,14,19,.13))!important;
}
.admin-page-active #adminAccountsPanel .admin-account-general-danger::before{
  content:"Gefahrenbereich";
  display:block;
  margin-bottom:10px;
  color:#bd858a;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* character cards inside account detail inherit the realm frame */
.admin-page-active #adminAccountsPanel .admin-account-character-pane .character-account-box,
.admin-page-active #adminAccountsPanel .admin-account-character-pane [class*="character-"]{
  border-color:#2b5270;
}

/* server/cards elsewhere inside admin */
.admin-page-active #adminServerPanel .server-metrics article,
.admin-page-active #adminServerPanel .world-tick-card,
.admin-page-active #adminServerPanel .server-bot-control,
.admin-page-active #adminServerPanel .server-bot-summary,
.admin-page-active #adminContentPanel article{
  border-color:#315879;
  border-radius:6px;
  background:linear-gradient(180deg,#0b2134,#071724);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

/* footer action */
.admin-page-active #adminDialog>.dialog-shell>.dialog-actions{
  padding-top:12px;
  border-top:1px solid rgba(63,105,136,.26);
}

@media(max-width:900px){
  .topbar{padding:10px 18px}.topbar::after{left:18px;right:18px}
  .admin-page-active .admin-section-nav{grid-template-columns:1fr 1fr}
  .admin-page-active .admin-section-tab{min-height:52px}
  .admin-page-active #adminDialog .dialog-head{padding-left:22px!important}
  .admin-page-active #adminDialog .dialog-head::before{display:none}
}

@media(max-width:620px){
  body:not(.auth-locked) .portal-app::before{opacity:.45}
  .admin-page-active #portalApp main{padding:22px 14px 60px}
  .admin-page-active .admin-section-nav{gap:5px;padding:4px}
  .admin-page-active .admin-section-tab{font-size:.9rem;padding:9px 8px}
  .admin-page-active .admin-section-tab::before{width:24px;font-size:1.05rem}
  .admin-page-active #adminAccountsPanel .admin-account-details{padding:14px!important}
  .admin-page-active #adminAccountsPanel .admin-account-summary{padding:12px!important}
  .admin-page-active #adminAccountsPanel .admin-account-actions{align-items:stretch!important}
}