/* =============================================================================
   details_unified.css
   -----------------------------------------------------------------------------
   Shared stylesheet for all "detail" pages (items, maps, skills, character,
   guild, muonline/events, servers-list/*, guides-list/*).

   This file used to be referenced by ~13 pages but did not exist, so each page
   404'd on it and compensated with large inline <style> blocks. The inline
   blocks have been moved here.

   IMPORTANT — scoping contract:
   Every rule below is scoped under a page-wrapper class that only appears on the
   page(s) it belongs to:
       .character-details   -> character_details.php / character_details.view.php
       .guild-details       -> guild_details.php
       .event-details       -> muonline.php
   Because of this, rules for one page are completely inert on the others, even
   though all detail pages load this single file. Keep this contract when adding
   rules: do NOT introduce bare/global selectors here, and do NOT override global
   design tokens (:root variables from style.css) — scope token overrides to a
   page wrapper instead.

   Tokens, buttons, .white-box, .breadcrumb(-nav), .sys-table, badges, modals,
   etc. are the design system and live in /css/style.css. This file only holds
   per-detail-page presentation that style.css does not cover.
   ========================================================================== */


/* =============================================================================
   1. CHARACTER DETAILS  (.character-details)
   Moved verbatim from character_details.view.php (was an inline <style> block).
   ========================================================================== */
.character-details{
  --cd-bg:var(--surface-0);
  --cd-surface:var(--surface-1);
  --cd-surface-2:var(--surface-2);
  --cd-text:var(--text);
  --cd-title:var(--text-strong);
  --cd-muted:var(--text-muted);
  --cd-line:var(--border);
  --cd-shadow:0 18px 46px rgba(0,0,0,.42),0 4px 14px rgba(214,31,43,.18);
  --cd-shadow-lg:0 28px 80px rgba(0,0,0,.55),0 10px 28px rgba(214,31,43,.22);
}

.character-details section:not(.white-box),
.guild-details section:not(.white-box),
.event-details section:not(.white-box){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.character-details section:not(.white-box):hover,
.guild-details section:not(.white-box):hover,
.event-details section:not(.white-box):hover{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.character-details .white-box{
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.35rem 1.45rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
  box-shadow: var(--cd-shadow);
  color: var(--cd-text);
}

.character-details .white-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: var(--panel-accent, linear-gradient(90deg,#3a6bff,#7da2ff));
}

.character-details .white-box::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-120px;
  width:260px;
  height:260px;
  border-radius:50%;
  background: var(--panel-glow, radial-gradient(circle, rgba(58,107,255,.11), transparent 70%));
  pointer-events:none;
}

.character-details .cd-panel--summary{
  --panel-accent: linear-gradient(90deg,#3a6bff,#7da2ff);
  --panel-glow: radial-gradient(circle, rgba(58,107,255,.13), transparent 70%);
}

.character-details .cd-panel--guild{
  --panel-accent: linear-gradient(90deg,#f5c24b,#f5c24b);
  --panel-glow: radial-gradient(circle, rgba(245,194,75,.14), transparent 70%);
}

.character-details .cd-panel--pvp{
  --panel-accent: linear-gradient(90deg,#ff4a57,#ff4a57);
  --panel-glow: radial-gradient(circle, rgba(255,74,87,.12), transparent 70%);
}

.character-details .cd-panel--boss{
  --panel-accent: linear-gradient(90deg,#f97316,#fb923c);
  --panel-glow: radial-gradient(circle, rgba(249,115,22,.12), transparent 70%);
}

.character-details .cd-panel--events{
  --panel-accent: linear-gradient(90deg,#0ea5e9,#22d3ee);
  --panel-glow: radial-gradient(circle, rgba(14,165,233,.12), transparent 70%);
}

.character-details .cd-panel--monsters{
  --panel-accent: linear-gradient(90deg,#6366f1,#8fb3ff);
  --panel-glow: radial-gradient(circle, rgba(99,102,241,.12), transparent 70%);
}

.character-details .cd-panel--history{
  --panel-accent: linear-gradient(90deg,#ec4899,#f472b6);
  --panel-glow: radial-gradient(circle, rgba(236,72,153,.12), transparent 70%);
}

.character-details .cd-panel--inventory{
  --panel-accent: linear-gradient(90deg,#39d98a,#22d3ee);
  --panel-glow: radial-gradient(circle, rgba(34,211,238,.16), transparent 70%);
}

.character-details .cd-panel--warehouse{
  --panel-accent: linear-gradient(90deg,#8fb3ff,#22d3ee);
  --panel-glow: radial-gradient(circle, rgba(143,179,255,.16), transparent 70%);
}

.character-details .cd-panel--inventory,
.character-details .cd-panel--warehouse{
  background:
    radial-gradient(circle at top right, rgba(34,211,238,.08), transparent 28%),
    radial-gradient(circle at top left, rgba(58,107,255,.12), transparent 30%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 24px 60px rgba(2,6,23,.34),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: #eef4ff !important;
}

.character-details .cd-panel--inventory::after,
.character-details .cd-panel--warehouse::after{
  opacity:.55;
}

.character-details .cd-panel--inventory .char-section-title,
.character-details .cd-panel--warehouse .char-section-title,
.character-details .cd-panel--inventory .char-muted,
.character-details .cd-panel--warehouse .char-muted,
.character-details .cd-panel--inventory p,
.character-details .cd-panel--warehouse p{
  color:#d9e7ff !important;
}

.character-details .cd-panel--inventory a,
.character-details .cd-panel--warehouse a{
  color:#7dd3fc;
}

.character-details .cd-panel--inventory a:hover,
.character-details .cd-panel--warehouse a:hover{
  color:#c4b5fd;
}

.character-details .cd-panel--inventory .char-dl dt,
.character-details .cd-panel--warehouse .char-dl dt{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:#eef4ff;
}

.character-details .cd-panel--inventory .char-dl dd,
.character-details .cd-panel--warehouse .char-dl dd{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.08);
  color:#d9e7ff;
}

.character-details .cd-panel--inventory .char-card,
.character-details .cd-panel--warehouse .char-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.16);
}

.character-details .cd-panel--inventory .muinvx-summary,
.character-details .cd-panel--warehouse .muinvx-summary{
  color:rgba(226,232,240,.76);
}

.character-details .white-box:hover,
.character-details .white-box:focus-within{
  transform:none;
  box-shadow: var(--cd-shadow-lg);
}

.character-details .page-title{
  margin:0 0 .35rem;
  color:var(--cd-title);
  font-size:clamp(2rem, 2.4vw + 1rem, 3rem);
  line-height:1.05;
}

.character-details .char-header{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  align-items:center;
  margin-bottom:1.25rem;
  padding:1.1rem;
  border-radius:20px;
  border:1px solid rgba(214,31,43,.30);
  background:linear-gradient(135deg, rgba(214,31,43,.14), rgba(245,201,80,.12));
}

.character-details .char-avatar{
  width:104px;
  height:104px;
  border-radius:24px;
  background:radial-gradient(circle at 30% 20%, #22304a 0, #05070c 72%);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(2,6,23,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

.character-details .char-avatar img{
  max-width:100%;
  max-height:100%;
  display:block;
}

.character-details .char-header-main{
  flex:1 1 260px;
  min-width:0;
}

.character-details .char-class-label{
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--brand-1);
  margin-bottom:.35rem;
}

.character-details .char-subline,
.character-details .char-intro,
.character-details .char-muted{
  color:var(--cd-muted);
}

.character-details .char-subline{
  font-size:.97rem;
}

.character-details .char-subline span + span::before{
  content:"•";
  padding:0 .45rem;
  color:var(--text-muted);
}

.character-details .char-shell-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}

.character-details .char-shell-grid > div{
  padding:1rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--surface-1);
  box-shadow:inset 0 1px 0 rgba(146,166,214,.10);
}

.character-details .char-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
}

.character-details .char-section-title{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 .8rem;
  font-size:1.05rem;
  font-weight:800;
  color:var(--cd-title);
}

.character-details .char-section-title::before{
  content:"";
  width:.76rem;
  height:.76rem;
  border-radius:999px;
  flex:none;
  background: var(--panel-accent, linear-gradient(90deg,#3a6bff,#7da2ff));
  box-shadow:0 0 0 6px rgba(58,107,255,.08);
}

.character-details .char-dl{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.55rem .75rem;
  font-size:.95rem;
}

.character-details .char-dl dt,
.character-details .char-dl dd{
  margin:0;
  padding:.72rem .85rem;
  border:1px solid var(--cd-line);
}

.character-details .char-dl dt{
  border-radius:14px 0 0 14px;
  border-right:0;
  background:var(--surface-1);
  font-weight:700;
  color:var(--cd-title);
}

.character-details .char-dl dd{
  min-width:110px;
  border-radius:0 14px 14px 0;
  text-align:right;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  background:linear-gradient(180deg, var(--surface-0), var(--surface-1));
}

.character-details .char-card{
  padding:1rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface-0), var(--surface-1));
  box-shadow:0 10px 30px rgba(0,0,0,.38);
}

.character-details .cd-panel--guild .char-card{
  background:linear-gradient(180deg, rgba(245,194,75,.08), var(--surface-1));
  border-color:rgba(245,194,75,.24);
}

.character-details .cd-panel--pvp .char-card{
  background:linear-gradient(180deg, rgba(255,91,77,.08), var(--surface-1));
  border-color:rgba(255,74,87,.24);
}

.character-details .cd-panel--events .char-card{
  background:linear-gradient(180deg, rgba(58,107,255,.08), var(--surface-1));
  border-color:rgba(14,165,233,.24);
}

.character-details .char-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.94rem;
}

.character-details .char-table th,
.character-details .char-table td{
  padding:.72rem .85rem;
  border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}

.character-details .char-table th{
  text-align:left;
  font-weight:700;
  color:var(--cd-title);
}

.character-details .char-table td{
  text-align:right;
  font-weight:800;
  color:var(--text);
}

.character-details .char-table tbody tr:nth-child(odd) th,
.character-details .char-table tbody tr:nth-child(odd) td{
  background:var(--surface-0);
}

.character-details .char-table tbody tr:nth-child(even) th,
.character-details .char-table tbody tr:nth-child(even) td{
  background:var(--surface-1);
}

.character-details .char-table tbody tr:hover th,
.character-details .char-table tbody tr:hover td{
  background:rgba(58,107,255,.14);
}

.character-details .char-table tbody tr:first-child th{
  border-top-left-radius:14px;
}

.character-details .char-table tbody tr:first-child td:last-child{
  border-top-right-radius:14px;
}

.character-details .char-table tbody tr:last-child th{
  border-bottom-left-radius:14px;
  border-bottom:0;
}

.character-details .char-table tbody tr:last-child td{
  border-bottom:0;
}

.character-details .char-table tbody tr:last-child td:last-child{
  border-bottom-right-radius:14px;
}

.character-details .char-pill-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.character-details .char-pill{
  padding:.38rem .72rem;
  border-radius:999px;
  border:1px solid rgba(214,31,43,.32);
  background:linear-gradient(180deg, rgba(214,31,43,.14), rgba(245,201,80,.12));
  color:var(--cd-title);
  font-size:.88rem;
}

.character-details .char-pill a{
  color:var(--brand-1);
  font-weight:800;
  text-decoration:none;
}

.character-details .char-pill a:hover{
  text-decoration:underline;
}

.character-details a{
  color:var(--brand-1);
}

.character-details a:hover{
  color:var(--brand-2);
}

.character-details .breadcrumb-nav{
  margin-bottom:1rem;
}

@media (max-width:850px){
  .character-details .char-shell-grid,
  .character-details .char-grid-2{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .character-details .white-box{
    padding:1.05rem;
    border-radius:20px;
  }

  .character-details .char-header{
    padding:.95rem;
  }

  .character-details .char-dl dt,
  .character-details .char-dl dd,
  .character-details .char-table th,
  .character-details .char-table td{
    padding:.65rem .7rem;
  }

  .character-details .page-title{
    font-size:clamp(1.7rem, 7vw, 2.35rem);
  }
}


/* =============================================================================
   2. GUILD DETAILS  (.guild-details)
   Moved verbatim from guild_details.php (was an inline <style> block).
   Two previously page-local bare selectors (.realm-switcher, .breadcrumb-nav)
   are scoped under .guild-details here so they cannot leak onto the other
   detail pages that now share this file. Markup keeps them inside
   <section class="container guild-details">, so rendering is unchanged.
   ========================================================================== */
.guild-details {
  /* Was undefined outside .muor (labels/section titles fell back to black).
     Scoped here so guild detail pages share the brand accent without affecting
     account pages, which consume --accent-contrast via a different fallback. */
  --accent-contrast: var(--brand-1);
}

.guild-details .white-box {
  padding: 1.8rem 1.9rem;
}
.guild-details .white-box:hover,
.guild-details .white-box:focus-within {
  background: var(--primary-bg);
  box-shadow: var(--box-shadow);
  transform: none;
}

.guild-details .page-title {
  margin: 0 0 .4rem;
}

.guild-details .guild-shell-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 1.7rem;
  align-items: flex-start;
}
@media (max-width: 850px) {
  .guild-details .guild-shell-grid {
    grid-template-columns: 1fr;
  }
}

.guild-details .guild-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  align-items: center;
  margin-bottom: 1.2rem;
}
.guild-details .guild-avatar {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  background: radial-gradient(circle at 30% 20%, #22304a 0, #05070c 68%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.guild-details .guild-avatar img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.guild-details .guild-header-main {
  flex: 1 1 220px;
  min-width: 0;
}
.guild-details .guild-label {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-contrast);
  margin-bottom: 0.35rem;
}
.guild-details .guild-subline {
  font-size: 0.95rem;
  color: var(--text-muted);
}
.guild-details .guild-subline span + span::before {
  content: "•";
  padding: 0 0.4rem;
  color: var(--text-muted);
}

.guild-details .guild-intro {
  font-size: 0.95rem;
  margin-top: .45rem;
  color: var(--text-muted);
}

.guild-details .guild-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--accent-contrast);
}

.guild-details .guild-dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.1rem;
  row-gap: 0.25rem;
  font-size: 0.95rem;
}
.guild-details .guild-dl dt {
  font-weight: 600;
  color: var(--accent);
}
.guild-details .guild-dl dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.guild-details .guild-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 1000px) {
  .guild-details .guild-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .guild-details .guild-grid-3 {
    grid-template-columns: 1fr;
  }
}

.guild-details .guild-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 850px) {
  .guild-details .guild-grid-2 {
    grid-template-columns: 1fr;
  }
}

.guild-details .guild-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.guild-details .guild-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.guild-details .guild-table tr {
  border-bottom: 1px solid var(--border);
}
.guild-details .guild-table tr:last-child {
  border-bottom: none;
}
.guild-details .guild-table th,
.guild-details .guild-table td {
  padding: 0.38rem 0.2rem;
}
.guild-details .guild-table th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.guild-details .guild-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.guild-details .guild-table--full th:first-child {
  width: 40%;
}

.guild-details .guild-muted {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.guild-details .realm-switcher {
  margin-bottom: 1rem;
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  font-size: 0.9rem;
}
.guild-details .realm-switcher select {
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
}

.guild-details .breadcrumb-nav {
  margin-bottom: 1rem;
}


/* =============================================================================
   3. EVENTS / MUONLINE LANDING  (.event-details)
   Moved from muonline.php (was an inline <style> block).
   The original block declared the card custom-properties on :root, which leaked
   a white --text-muted onto the whole page (overriding style.css globally).
   They are now declared on .event-details so they only apply within the page
   wrapper, and every previously-bare selector (.card-grid, .event-card, etc.)
   is scoped to .event-details. Markup keeps all of this inside
   <section class="container event-details">, so rendering is unchanged.
   ========================================================================== */
.event-details{
  --card-bg: #0b1526;
  --card-border: rgba(255,255,255,.08);
  --card-hover: rgba(255,255,255,.12);
  --text-muted: rgba(255,255,255,.7);
  --tag-bg: rgba(255,255,255,.08);
}
.event-details .card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:1rem;
}
.event-details .event-card{
  display:block; position:relative; border:1px solid var(--card-border);
  border-radius:12px; padding:1rem; background:var(--card-bg);
  text-decoration:none; color:inherit; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.event-details .event-card:focus, .event-details .event-card:hover{
  transform:translateY(-2px);
  border-color: var(--card-hover);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  outline:none;
}
.event-details .event-card__eyebrow{
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin-bottom:.35rem;
}
.event-details .event-card h3{
  margin:.1rem 0 .35rem; font-size:1.05rem; line-height:1.3;
}
.event-details .event-card p{ margin:0 0 .75rem; color:var(--text-muted); }
.event-details .event-card ul{ margin:.5rem 0 0; padding-left:1rem; color:var(--text-muted); }
.event-details .event-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.event-details .event-tag{ font-size:.75rem; padding:.25rem .5rem; border-radius:999px; background:var(--tag-bg); }
.event-details .event-card__cta{ margin-top:.75rem; font-weight:600; }
.event-details .preview-list{ margin:.5rem 0 0; padding-left:1rem; color:var(--text-muted); font-size:.92rem;}
.event-details .white-box .section-intro{ margin-top:.2rem; color:var(--text-muted); }
.event-details .breadcrumb-nav { margin-bottom: 1rem; }