/* ============================================================
 *  Vanilla WoW theme — Bootstrap 5 overlay
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root,
[data-bs-theme="dark"] {
  /* Surfaces */
  --bs-body-bg:           #0a0807;
  --bs-body-bg-rgb:       10, 8, 7;
  --bs-body-color:        #f0e6c8;
  --bs-body-color-rgb:    240, 230, 200;
  --bs-emphasis-color:    #ffcc33;
  --bs-secondary-bg:      #1c1813;
  --bs-secondary-bg-rgb:  28, 24, 19;
  --bs-tertiary-bg:       #0e0a06;
  --bs-tertiary-bg-rgb:   14, 10, 6;
  --bs-border-color:      #5c4a1f;
  --bs-border-color-translucent: rgba(201, 162, 39, .25);

  /* Theme colors */
  --bs-primary:           #c9a227;
  --bs-primary-rgb:       201, 162, 39;
  --bs-primary-bg-subtle: #3a2c10;
  --bs-primary-border-subtle: #8b6914;
  --bs-primary-text-emphasis: #ffcc33;
  --bs-success:           #5fa84a;
  --bs-success-rgb:       95, 168, 74;
  --bs-danger:            #9b2c2c;
  --bs-danger-rgb:        155, 44, 44;
  --bs-link-color:        #c9a227;
  --bs-link-color-rgb:    201, 162, 39;
  --bs-link-hover-color:  #ffcc33;

  /* Typography */
  --bs-font-sans-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --bs-body-font-size: 16px;

  /* WoW palette tokens */
  --wow-gold:        #c9a227;
  --wow-gold-bright: #ffcc33;
  --wow-gold-dim:    #8b6914;
  --wow-gold-faint:  #3a2c10;
  --wow-serif:       'Cinzel', 'Trajan Pro', Georgia, serif;
}

body {
  background:
    radial-gradient(ellipse at top, #1a140d 0%, var(--bs-body-bg) 70%),
    var(--bs-body-bg);
  font-family: var(--bs-font-sans-serif);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wow-serif);
  color: var(--wow-gold-bright);
  letter-spacing: 1.5px;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 204, 51, .15), 0 1px 0 #000;
}

a { text-decoration: none; }
a:hover { color: var(--wow-gold-bright); }

/* ----- Cards ----- */
.card {
  background: linear-gradient(to bottom, #1d1812, #14100b);
  border: 1px solid var(--wow-gold-dim);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px #2a2014,
    inset 0 0 18px rgba(0, 0, 0, .6),
    0 2px 6px rgba(0, 0, 0, .4);
  color: var(--bs-body-color);
}
.card-header {
  background: #1a140d;
  border-bottom: 1px solid var(--wow-gold-dim);
  font-family: var(--wow-serif);
  color: var(--wow-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
}

/* ----- Buttons ----- */
.btn {
  font-family: var(--wow-serif);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 2px;
  text-shadow: 0 1px 0 #000;
  transition: border-color .15s, color .15s, box-shadow .15s, background .15s;
}
.btn-primary {
  background: linear-gradient(to bottom, #5a3f15, #2e1f08);
  border: 1px solid var(--wow-gold);
  color: var(--wow-gold-bright);
  box-shadow: inset 0 1px 0 rgba(255,204,51,.15), 0 1px 2px rgba(0,0,0,.5);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(to bottom, #6e4d18, #3a280c);
  border-color: var(--wow-gold-bright);
  color: var(--wow-gold-bright);
  box-shadow: inset 0 1px 0 rgba(255,204,51,.25), 0 0 10px rgba(201,162,39,.4);
}
.btn-secondary {
  background: linear-gradient(to bottom, #2c2114, #18120a);
  border: 1px solid var(--wow-gold-dim);
  color: var(--wow-gold-bright);
}
.btn-secondary:hover {
  background: linear-gradient(to bottom, #3a2c1c, #221a0c);
  border-color: var(--wow-gold);
  color: var(--wow-gold-bright);
}
.btn-danger {
  background: linear-gradient(to bottom, #2c1414, #18080a);
  border: 1px solid var(--bs-danger);
  color: #e0a8a8;
}
.btn-danger:hover {
  background: linear-gradient(to bottom, #3a1a1a, #221010);
  border-color: #e74c3c;
  color: #fff;
  box-shadow: 0 0 8px rgba(155,44,44,.5);
}
.btn-outline-secondary {
  border: 1px solid var(--wow-gold-dim);
  color: var(--bs-body-color);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: rgba(201,162,39,.08);
  border-color: var(--wow-gold);
  color: var(--wow-gold-bright);
}

/* ----- Forms ----- */
.form-control, .form-select {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--wow-gold-faint);
  color: var(--bs-body-color);
  font-family: var(--bs-font-sans-serif);
  font-size: 15px;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.form-control:focus, .form-select:focus {
  background: var(--bs-tertiary-bg);
  border-color: var(--wow-gold);
  color: var(--bs-body-color);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .15rem rgba(201,162,39,.25);
}
.form-control[readonly], .form-control:disabled {
  background: #0a0805;
  color: var(--wow-gold-dim);
  cursor: not-allowed;
}
.form-control::placeholder { color: #5a4f3a; font-style: italic; }
.form-label {
  font-family: var(--wow-serif);
  font-size: 11px;
  color: #b5a37a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.form-check-input {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--wow-gold-dim);
}
.form-check-input:checked {
  background-color: var(--wow-gold);
  border-color: var(--wow-gold);
}
.form-check-input:focus { box-shadow: 0 0 0 .15rem rgba(201,162,39,.25); border-color: var(--wow-gold); }
.form-check-label {
  font-family: var(--wow-serif);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--bs-body-color);
}

/* ----- List groups ----- */
.list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wow-gold-faint);
  color: var(--bs-body-color);
  font-family: var(--bs-font-sans-serif);
  padding: 12px 16px;
  border-radius: 0 !important;
}
.list-group-item-action:hover { background: rgba(201, 162, 39, .08); color: var(--bs-body-color); }
.list-group-item.active,
.list-group-item-action.active {
  background: linear-gradient(to right, rgba(201,162,39,.18), rgba(201,162,39,.04));
  color: var(--wow-gold-bright);
  border-color: var(--wow-gold-faint);
  border-left: 3px solid var(--wow-gold-bright);
  padding-left: 13px;
}

/* ----- Badges ----- */
.badge {
  font-family: var(--wow-serif);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  border-radius: 2px;
  padding: 3px 7px;
  vertical-align: middle;
}
.badge.bg-gold    { background: #3a2c10 !important; color: var(--wow-gold-bright); border: 1px solid var(--wow-gold); }
.badge.bg-success { background: #1a2c14 !important; color: #aef0a0; border: 1px solid var(--bs-success); }
.badge.bg-danger  { background: #5c1a1a !important; color: #f8c8c8; border: 1px solid var(--bs-danger); }
.badge.bg-secondary { background: #1a1a1a !important; color: #aaa; border: 1px solid #555; }

/* ----- Modals ----- */
.modal-content {
  background: linear-gradient(to bottom, #1d1812, #14100b);
  border: 1px solid var(--wow-gold-dim);
  box-shadow: inset 0 0 0 1px #2a2014, 0 8px 32px rgba(0,0,0,.7);
}
.modal-header { border-bottom: 1px solid var(--wow-gold-dim); }
.modal-footer { border-top: 1px solid var(--wow-gold-dim); }
.modal-title { color: var(--wow-gold-bright); letter-spacing: 2px; }
.btn-close { filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(0deg); opacity: .8; }
.btn-close:hover { opacity: 1; }

/* ----- Navbar ----- */
.navbar {
  background: linear-gradient(to bottom, #1a140d, #0e0a06) !important;
  border-bottom: 2px solid var(--wow-gold-dim);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.navbar-brand {
  font-family: var(--wow-serif);
  color: var(--wow-gold-bright) !important;
  letter-spacing: 3px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,204,51,.35), 0 1px 0 #000;
}
.navbar .nav-link {
  font-family: var(--wow-serif);
  color: var(--bs-body-color) !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 12px;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
  color: var(--wow-gold-bright) !important;
}

/* ----- Bootstrap Icons (bi) ----- */
.bi { vertical-align: -0.125em; }

/* ----- Wowhead icon — gold-rimmed square ----- */
.wow-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--wow-gold-dim);
  background: #000;
  box-shadow: inset 0 0 0 1px #000;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.wow-icon.lg { width: 56px; height: 56px; }
.wow-icon.sm { width: 28px; height: 28px; }
.wow-icon.xs { width: 20px; height: 20px; }

/* ----- Decorative section title ----- */
.wow-section-title {
  font-family: var(--wow-serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--wow-gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wow-section-title::before,
.wow-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--wow-gold-dim), transparent);
}
.wow-section-title::before { max-width: 28px; }

/* ----- Realm switcher (mounted by realm.js) ----- */
.realm-switcher { display: flex; align-items: center; gap: 10px; }
.realm-switcher-label {
  font-family: var(--wow-serif);
  font-size: 10px;
  color: #b5a37a;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.realm-switcher select {
  background: var(--bs-tertiary-bg);
  color: var(--wow-gold-bright);
  border: 1px solid var(--wow-gold-dim);
  border-radius: 2px;
  padding: 5px 10px;
  font-family: var(--wow-serif);
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
}
.realm-switcher select:focus { border-color: var(--wow-gold); box-shadow: 0 0 6px rgba(201,162,39,.4); }

/* ----- Status indicators ----- */
.dot { width: 10px; height: 10px; border-radius: 50%; background: #333; display: inline-block; }
.dot.up   { background: var(--bs-success); box-shadow: 0 0 8px var(--bs-success); }
.dot.down { background: var(--bs-danger);  box-shadow: 0 0 6px var(--bs-danger); }

/* ----- Toast ----- */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 22px;
  border-radius: 2px;
  font-family: var(--wow-serif);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: none;
  z-index: 1080;
  border: 1px solid var(--wow-gold);
  box-shadow: 0 0 14px rgba(0,0,0,.7), inset 0 0 8px rgba(0,0,0,.4);
}
#toast.ok  { background: #1a2c14; color: #aef0a0; border-color: var(--bs-success); }
#toast.err { background: #2c1414; color: #f8c8c8; border-color: var(--bs-danger); }

/* ----- Shimmer (loading state) ----- */
.shimmer {
  background: linear-gradient(90deg, #1c1813 25%, #3a2c10 50%, #1c1813 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 2px;
  color: transparent;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ----- Scrollbars ----- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bs-body-bg); }
::-webkit-scrollbar-thumb { background: #2a2014; border: 1px solid var(--wow-gold-faint); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #3a2c1c; }

/* ============================================================
 *  Phase 1 — close the Bootstrap coverage gap
 *  (alerts, tables, extra button variants, inputs, spinners,
 *   progress, contrast helpers) so stock BS colors stop leaking.
 * ============================================================ */

/* ----- Contrast: warm up muted text (stock BS gray fails AA on parchment) ----- */
.text-secondary { color: #b5a37a !important; }
.text-muted     { color: #9c8c63 !important; }
small, .small   { color: inherit; }

/* ----- Alerts ----- */
.alert {
  border-radius: 3px;
  border: 1px solid var(--wow-gold-dim);
  background: linear-gradient(to bottom, #1d1812, #14100b);
  color: var(--bs-body-color);
  box-shadow: inset 0 0 0 1px #2a2014, inset 0 0 14px rgba(0,0,0,.5);
}
.alert .alert-link { color: var(--wow-gold-bright); font-weight: 600; }
.alert-success {
  border-color: var(--bs-success);
  background: linear-gradient(to bottom, #1a2c14, #101c0c);
  color: #c8f0ba;
}
.alert-danger {
  border-color: var(--bs-danger);
  background: linear-gradient(to bottom, #2c1414, #1c0c0c);
  color: #f0c0c0;
}
.alert-warning {
  border-color: #b8860b;
  background: linear-gradient(to bottom, #2c2410, #1c1608);
  color: #f0dca0;
}
.alert-info {
  border-color: #4a7a9b;
  background: linear-gradient(to bottom, #14222c, #0c161c);
  color: #bcdcea;
}

/* ----- Tables ----- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  color: var(--bs-body-color);
  border-color: var(--wow-gold-faint);
}
.table > thead {
  font-family: var(--wow-serif);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
}
.table > thead th {
  background: #1a140d !important;
  color: var(--wow-gold) !important;
  border-bottom: 2px solid var(--wow-gold-dim);
  font-weight: 600;
}
.table > tbody td { border-color: var(--wow-gold-faint); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(201,162,39,.045);
  color: var(--bs-body-color);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(201,162,39,.10);
  color: var(--wow-gold-bright);
}
/* Neutralize Bootstrap's .table-dark / .table-secondary heads to the theme */
.table .table-dark, .table .table-secondary,
.table-dark > *, .table-secondary > * {
  --bs-table-bg: #1a140d;
  --bs-table-color: var(--wow-gold);
  background: #1a140d !important;
  color: var(--wow-gold) !important;
}

/* ----- Extra button variants (match the gilded set) ----- */
.btn-success {
  background: linear-gradient(to bottom, #1f3d16, #12240c);
  border: 1px solid var(--bs-success);
  color: #c8f0ba;
}
.btn-success:hover, .btn-success:focus {
  background: linear-gradient(to bottom, #2a5020, #173112);
  border-color: #7fc868; color: #fff;
  box-shadow: 0 0 8px rgba(95,168,74,.45);
}
.btn-warning {
  background: linear-gradient(to bottom, #4a3a12, #2a2008);
  border: 1px solid #b8860b;
  color: #f0dca0;
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(to bottom, #5e4a18, #3a2c0c);
  border-color: var(--wow-gold-bright); color: var(--wow-gold-bright);
  box-shadow: 0 0 8px rgba(184,134,11,.45);
}
.btn-info {
  background: linear-gradient(to bottom, #1a3340, #0e1e28);
  border: 1px solid #4a7a9b;
  color: #bcdcea;
}
.btn-info:hover, .btn-info:focus {
  background: linear-gradient(to bottom, #244657, #142a36);
  border-color: #7fb4d4; color: #fff;
  box-shadow: 0 0 8px rgba(74,122,155,.45);
}
.btn-outline-warning {
  border: 1px solid var(--wow-gold-dim);
  color: var(--wow-gold-bright);
  background: transparent;
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
  background: rgba(201,162,39,.10);
  border-color: var(--wow-gold);
  color: var(--wow-gold-bright);
  box-shadow: 0 0 8px rgba(201,162,39,.35);
}
.btn-outline-danger {
  border: 1px solid var(--bs-danger);
  color: #e0a8a8; background: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: rgba(155,44,44,.12); border-color: #e74c3c; color: #fff;
}
/* Consistent sizing so buttons with different label lengths line up */
.btn { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-lg { min-height: 44px; }
.btn-sm { min-height: 27px; font-size: 11px; }
.btn .bi { vertical-align: -0.05em; }

/* ----- Input groups ----- */
.input-group-text {
  background: #1a140d;
  border: 1px solid var(--wow-gold-faint);
  color: var(--wow-gold-dim);
  border-radius: 2px;
}

/* ----- Spinners (stock is BS blue) ----- */
.spinner-border, .spinner-grow { color: var(--wow-gold); }

/* ----- Progress bars ----- */
.progress {
  background: #0a0805;
  border: 1px solid var(--wow-gold-faint);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.progress-bar {
  background: linear-gradient(to bottom, #d4af37, #a07d18);
  color: #1a140d;
  font-family: var(--wow-serif);
  font-size: 10px;
  letter-spacing: 1px;
}

/* ----- Dropdown menus (navbar Tools etc.) ----- */
.dropdown-menu {
  background: linear-gradient(to bottom, #1d1812, #14100b);
  border: 1px solid var(--wow-gold-dim);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,.7), inset 0 0 0 1px #2a2014;
}
.dropdown-item {
  color: var(--bs-body-color);
  font-family: var(--wow-serif);
  font-size: 13px;
  letter-spacing: .5px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(201,162,39,.12);
  color: var(--wow-gold-bright);
}
.dropdown-item.disabled { color: #5a4f3a; }
.dropdown-header {
  color: var(--wow-gold-dim);
  font-family: var(--wow-serif);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
}
.dropdown-divider { border-color: var(--wow-gold-faint); }

/* ============================================================
 *  Shared layout primitives (replace per-page inline hacks)
 * ============================================================ */

/* One canonical fixed-navbar offset. Pages opt in with <body class="app-page">. */
body.app-page { padding-top: 80px; }
body.app-page.flush { padding-top: 56px; }

/* Standard page header — replaces the 4 divergent title patterns. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 2px solid var(--wow-gold-dim);
  padding-bottom: 14px;
  margin-bottom: 26px;
}
.page-header h1, .page-header .h1 { font-size: 1.6rem; margin: 0; }
.page-header .page-header-actions { display: flex; align-items: center; gap: 8px; }

/* Reusable gilded panel (the inline gold-border/dark-bg combo, 21× deduped). */
.wow-panel {
  background: linear-gradient(to bottom, #1a140d, #0e0a06);
  border: 1px solid var(--wow-gold-dim);
  border-radius: 4px;
}

/* Reusable gold pill / chip (badges with varying text keep one height). */
.wow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201,162,39,.15);
  border: 1px solid var(--wow-gold-dim);
  color: var(--wow-gold-bright);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Realm pill specifically (used by the consolidated realm indicator). */
.realm-pill { font-family: var(--wow-serif); letter-spacing: 1px; }

/* ============================================================
 *  Dashboard panels — ornate framed variant, compact stat bar,
 *  realm command center. Layout/look only; spacing & font-size
 *  are driven by Bootstrap utility classes in the markup.
 * ============================================================ */

/* Ornate framed panel: parchment grain + inset double-frame + corner
   rivets. Opt-in — separate from the plain .wow-panel above so the
   21 existing usages are untouched. Layer over a .card. */
.wow-panel-framed {
  position: relative;
  background-image:
    radial-gradient(circle at 6px 6px, rgba(201,162,39,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 6px, rgba(201,162,39,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 6px), rgba(201,162,39,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(201,162,39,.55) 0 1.5px, transparent 2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, #1f1a12, #14100b);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
.wow-panel-framed::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201,162,39,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
  pointer-events: none;
  border-radius: 2px;
}

/* Compact stat bar — Bootstrap grid (.row.g-0 > .col-3) handles the
   horizontal layout & sizing; .stat-cell just lays out icon · number ·
   label and draws the divider. */
.stat-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--wow-gold-faint);
}
.stat-cell:last-child { border-right: 0; }
.stat-num {
  font-family: var(--wow-serif);
  color: var(--wow-gold-bright);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,204,51,.18), 0 1px 0 #000;
}
.stat-lbl {
  font-family: var(--wow-serif);
  color: #b5a37a;
  font-size: .6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Realm command center (identity + status sit with the controls) */
.command-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--wow-gold-dim);
  position: relative;
  z-index: 1;
}
.command-services { position: relative; z-index: 1; }
.realm-title {
  font-family: var(--wow-serif);
  color: var(--wow-gold-bright);
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,204,51,.25), 0 1px 0 #000;
}
.realm-sub {
  font-family: var(--wow-serif);
  color: #b5a37a;
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 3px;
}
.realm-meta { text-align: right; line-height: 1.3; }
.realm-meta-lbl {
  display: block;
  font-family: var(--wow-serif);
  color: #8d7c52;
  font-size: .6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.realm-meta-val { color: var(--wow-gold-bright); font-family: monospace; }
.realm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .5rem .9rem;
  border-radius: 2px;
  font-family: var(--wow-serif);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--wow-gold-dim);
  background: linear-gradient(to bottom, #221a0c, #14100b);
}
.realm-status-pill.up   { border-color: var(--bs-success); color: #aef0a0; box-shadow: 0 0 12px rgba(95,168,74,.25); }
.realm-status-pill.down { border-color: var(--bs-danger);  color: #f0b0b0; box-shadow: 0 0 12px rgba(155,44,44,.25); }
.realm-status-pill .dot { width: 11px; height: 11px; }
.services-caption {
  font-family: var(--wow-serif);
  color: #8d7c52;
  font-size: .62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Service status indicators (JS-rendered service cards) */
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot-active     { background:#1eff00; box-shadow:0 0 8px #1eff00aa; }
.dot-inactive   { background:#ff4444; box-shadow:0 0 8px #ff444488; }
.dot-failed     { background:#ff8000; box-shadow:0 0 8px #ff800088; }
.dot-unknown    { background:#888; }
.dot-activating { background:#ffd100; box-shadow:0 0 8px #ffd10088; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* GM purple action button */
.btn-purple { background-color:#a335ee; border-color:#a335ee; color:#fff; }
.btn-purple:hover { background-color:#8b2ad0; border-color:#8b2ad0; }

/* ----- Shared footer (injected by navbar.js on admin pages) ----- */
.wow-footer {
  margin-top: 56px;
  border-top: 2px solid var(--wow-gold-dim);
  background: linear-gradient(to bottom, #0e0a06, #1a140d);
  padding: 18px 0;
  font-family: var(--wow-serif);
  color: #8d7c52;
  font-size: .78rem;
  letter-spacing: 1px;
}
.wow-footer .footer-brand {
  color: var(--wow-gold-bright);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,204,51,.2), 0 1px 0 #000;
}
.wow-footer .footer-meta { color: #8d7c52; }
.wow-footer a { color: var(--wow-gold); }
.wow-footer a:hover { color: var(--wow-gold-bright); }