/* ============================================================
   Project Astral — Armory theme overrides
   Loaded by /opt/azerothcore-armory/static/layout.hbs after
   bulma.min.css + armory.css. Pulls the AzerothCore Armory's
   default Bulma white into the Astral dark/cosmic palette so the
   embedded iframe at /armory blends into the rest of the site.
   ============================================================ */

:root {
    --astral-bg-deep:    #020309;
    --astral-bg-card:    #080c1e;
    --astral-bg-card-hi: #0b1026;
    --astral-text:       #e8e4f8;
    --astral-text-mute:  #8285a8;
    --astral-gold:       #c8a951;
    --astral-gold-lt:    #f0d86a;
    --astral-gold-dk:    #8a6f2e;
    --astral-blue:       #4fc3f7;
    --astral-border:     rgba(200,169,81,0.14);
    --astral-border-hi:  rgba(200,169,81,0.38);
}

/* ── Body / global ──────────────────────────────────────────── */
html, body {
    background: var(--astral-bg-deep) !important;
    color: var(--astral-text) !important;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 18% 38%, rgba(167,139,250,0.18) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 33% 14%, rgba(200,169,81,0.32) 0%, transparent 100%),
        radial-gradient(1px 1px at 61% 73%, rgba(79,195,247,0.22)  0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 22%, rgba(200,169,81,0.24) 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 91%, rgba(255,255,255,0.12) 0%, transparent 100%);
    background-size: 1000px 700px;
    opacity: 0.7;
}

/* ── Bulma .section / .container / .box ─────────────────────── */
.section { background: transparent !important; padding: 1.5rem 1rem !important; }
.container { background: transparent !important; }
.box, .card, .panel {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
    border-radius: 7px !important;
}

/* ── Headings ───────────────────────────────────────────────── */
.title, h1, h2, h3, h4, h5, h6 {
    color: var(--astral-gold) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    letter-spacing: 0.04em;
}
.subtitle { color: var(--astral-text-mute) !important; }
.title.is-1, .title.is-2, .title.is-3, .title.is-4 {
    text-shadow: 0 0 18px rgba(200,169,81,0.22);
}

/* ── Links + buttons ────────────────────────────────────────── */
a, a:visited {
    color: var(--astral-gold) !important;
    transition: color 0.2s ease;
}
a:hover { color: var(--astral-gold-lt) !important; }

.button, button {
    background: var(--astral-bg-card-hi) !important;
    color: var(--astral-gold) !important;
    border: 1px solid var(--astral-border-hi) !important;
    transition: all 0.2s ease;
}
.button:hover, button:hover {
    background: rgba(200,169,81,0.14) !important;
    color: var(--astral-gold-lt) !important;
    border-color: var(--astral-gold) !important;
    box-shadow: 0 0 18px rgba(200,169,81,0.18);
}
.button.is-primary, button.is-primary {
    background: linear-gradient(135deg, var(--astral-gold-dk) 0%, var(--astral-gold) 60%, var(--astral-gold-lt) 100%) !important;
    color: #07040a !important;
    border: none !important;
    font-weight: 600;
}
.button.is-link, .button.is-info {
    background: var(--astral-bg-card-hi) !important;
    color: var(--astral-blue) !important;
    border: 1px solid rgba(79,195,247,0.32) !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
table.table, .table {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.table thead th, .table th {
    background: rgba(200,169,81,0.06) !important;
    color: var(--astral-gold) !important;
    border-bottom: 1px solid var(--astral-border-hi) !important;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.table td, .table tr {
    background: transparent !important;
    color: var(--astral-text) !important;
    border-color: var(--astral-border) !important;
}
.table.is-striped tbody tr:nth-child(2n) { background: rgba(200,169,81,0.03) !important; }
.table tbody tr:hover { background: rgba(200,169,81,0.06) !important; }

/* ── Tag / badge ─────────────────────────────────────────────── */
.tag, .badge {
    background: var(--astral-bg-card-hi) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
}
.tag.is-warning { background: rgba(200,169,81,0.12) !important; color: var(--astral-gold) !important; border-color: var(--astral-border-hi) !important; }
.tag.is-info    { background: rgba(79,195,247,0.10) !important; color: var(--astral-blue) !important; border-color: rgba(79,195,247,0.32) !important; }
.tag.is-success { background: rgba(80,180,80,0.12) !important; color: #6ddc8b !important; border-color: rgba(80,180,80,0.32) !important; }
.tag.is-danger  { background: rgba(220,80,80,0.12) !important; color: #e88 !important; border-color: rgba(220,80,80,0.32) !important; }

/* ── Inputs ──────────────────────────────────────────────────── */
.input, .textarea, .select select {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
}
.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--astral-gold) !important;
    box-shadow: 0 0 0 0.125em rgba(200,169,81,0.2) !important;
    background: var(--astral-bg-card-hi) !important;
}
::placeholder { color: var(--astral-text-mute) !important; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination-link, .pagination-previous, .pagination-next {
    background: var(--astral-bg-card-hi) !important;
    color: var(--astral-gold) !important;
    border-color: var(--astral-border) !important;
}
.pagination-link.is-current {
    background: var(--astral-gold) !important;
    color: #07040a !important;
    border-color: var(--astral-gold-lt) !important;
}

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs ul { border-bottom-color: var(--astral-border) !important; }
.tabs a {
    color: var(--astral-text-mute) !important;
    border-bottom-color: transparent !important;
}
.tabs a:hover { color: var(--astral-gold-lt) !important; }
.tabs li.is-active a {
    color: var(--astral-gold) !important;
    border-bottom-color: var(--astral-gold) !important;
}

/* ── Notifications / alerts ─────────────────────────────────── */
.notification, .message, .message-body {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
}

/* ── Character page progress / xp bars ──────────────────────── */
progress.progress, progress {
    background: var(--astral-bg-card-hi) !important;
}
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--astral-gold-dk) 0%, var(--astral-gold) 100%) !important; }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--astral-gold-dk) 0%, var(--astral-gold) 100%) !important; }

/* ── Selection ──────────────────────────────────────────────── */
::selection { background: rgba(200,169,81,0.30); color: var(--astral-text); }

/* ── Custom-scrollbar (Webkit) ──────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: var(--astral-bg-deep); }
::-webkit-scrollbar-thumb    {
    background: linear-gradient(to bottom, var(--astral-gold-dk), rgba(79,195,247,0.4));
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--astral-gold), var(--astral-blue));
}

/* ── Bulma title sizes — armory uses .title.is-size-1 etc. ───── */
.title.is-1, .title.is-size-1 {
    font-family: 'Cinzel', serif !important;
    font-size: 2.6rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--astral-gold-dk) 0%, var(--astral-gold) 45%, var(--astral-gold-lt) 75%, rgba(200,169,81,0.7) 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 22px rgba(200,169,81,0.32));
    text-align: center;
    margin: 1.5rem 0 1rem !important;
}
.title.is-2, .title.is-size-2 { font-size: 1.9rem !important; letter-spacing: 0.06em; }
.title.is-3, .title.is-size-3 { font-size: 1.5rem !important; }
.title.is-4, .title.is-size-4 { font-size: 1.2rem !important; }

/* ── DataTables (jQuery DataTables — index search list etc.) ─── */
table.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--astral-border) !important;
}
table.dataTable thead th,
table.dataTable thead td {
    background-color: rgba(200,169,81,0.07) !important;
    /* Suppress DataTables' default sort-sprite — it tries to tile the
       1.11.3 PNG over the whole header area on this build, which paints
       a noisy triangle grid. The active-column tint below is enough
       indication of which sort is applied without an arrow icon. */
    background-image: none !important;
    background-repeat: no-repeat !important;
    color: var(--astral-gold) !important;
    border-bottom: 1px solid var(--astral-border-hi) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 0.85rem 0.65rem !important;
    position: relative !important;
}
/* Strip every DataTables sort indicator (sprite + pseudo arrows) so
   the header stays clean. Click-to-sort still works, the active column
   gets a tinted background instead of an icon. */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::before,
table.dataTable thead .sorting_desc_disabled::after {
    display: none !important;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: rgba(200,169,81,0.12) !important;
    color: var(--astral-gold-lt) !important;
}
table.dataTable tbody tr {
    background-color: transparent !important;
    color: var(--astral-text) !important;
    transition: background 0.18s ease;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: rgba(200,169,81,0.025) !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.row-border tbody tr:hover {
    background-color: rgba(200,169,81,0.08) !important;
}
table.dataTable tbody td {
    border-top: 1px solid var(--astral-border) !important;
    padding: 0.7rem 0.65rem !important;
    color: var(--astral-text) !important;
}
table.dataTable a {
    color: var(--astral-gold) !important;
    transition: color 0.2s ease;
}
table.dataTable a:hover { color: var(--astral-gold-lt) !important; }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    color: var(--astral-text-mute) !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    color: var(--astral-text-mute) !important;
}
.dataTables_wrapper .dataTables_filter input {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
    border-radius: 7px !important;
    padding: 0.45rem 0.85rem !important;
    margin-left: 0.55rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: var(--astral-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,169,81,0.12), 0 0 18px rgba(200,169,81,0.18) !important;
}
.dataTables_wrapper .dataTables_length select {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
    border-radius: 5px !important;
}

/* DataTables pagination — uses .button.is-dark per inline override */
.dataTables_paginate .button {
    background: var(--astral-bg-card-hi) !important;
    color: var(--astral-gold) !important;
    border: 1px solid var(--astral-border) !important;
    margin: 0 2px;
}
.dataTables_paginate .button.is-active,
.dataTables_paginate .button.current {
    background: linear-gradient(135deg, var(--astral-gold-dk) 0%, var(--astral-gold) 60%, var(--astral-gold-lt) 100%) !important;
    color: #07040a !important;
    border-color: var(--astral-gold-lt) !important;
    box-shadow: 0 0 14px rgba(200,169,81,0.32) !important;
}
.dataTables_paginate .button:hover:not(.is-active):not(.current) {
    background: rgba(200,169,81,0.14) !important;
    color: var(--astral-gold-lt) !important;
    border-color: var(--astral-gold) !important;
}

/* ── Realm selector + Bulma .select dropdown ──────────────────── */
.select select, select {
    background: var(--astral-bg-card) !important;
    color: var(--astral-text) !important;
    border: 1px solid var(--astral-border) !important;
    border-radius: 7px !important;
    font-family: 'Open Sans', sans-serif !important;
    padding: 0.55rem 2.5rem 0.55rem 1rem !important;
}
.select select:focus, select:focus {
    border-color: var(--astral-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,169,81,0.12) !important;
    outline: none !important;
}
.select::after {
    border-color: var(--astral-gold) !important;
}
.realm-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--astral-gold);
    margin-right: 0.65rem;
    vertical-align: middle;
}
#select-realm-container {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    background: var(--astral-bg-card);
    border: 1px solid var(--astral-border);
    border-radius: 7px;
    margin-bottom: 1rem;
}

/* ── Character profile typography ─────────────────────────────── */
/* The character page has .character-name, .character-realm, etc.
   Apply the gold-Cinzel treatment. */
.char-name, .character-name, h1.character-title,
[id*="character"] h1, [class*="character"] .title {
    font-family: 'Cinzel', serif !important;
    color: var(--astral-gold) !important;
    text-shadow: 0 0 18px rgba(200,169,81,0.28);
}

/* ── Page section padding ──────────────────────────────────────── */
.section { padding: 1.5rem 1.5rem !important; }
.container.is-max-desktop, .container.is-max-widescreen {
    background: transparent !important;
}

/* ── Strong / em text ──────────────────────────────────────────── */
strong, b { color: var(--astral-text); font-weight: 600; }
em, i { color: var(--astral-text-mute); }

/* ── Code blocks (rare on armory but possible) ─────────────────── */
code, pre {
    background: var(--astral-bg-card) !important;
    color: var(--astral-gold) !important;
    border: 1px solid var(--astral-border) !important;
    border-radius: 4px;
    padding: 0.1em 0.45em;
}

/* ── Iframe-mode tweaks ───────────────────────────────────────── */
/* When the armory loads inside playastral.io/armory the body needs
   to stay transparent so the parent's astral background bleeds in. */
body.is-iframe { background: transparent !important; }
body.is-iframe::before { display: none; }

/* ── 3D model viewer container — match the page background ───── */
/* Plain astral-deep — no extra gradients/starfield (the body already
   has those, adding more here just made the viewer area noisy). */
#model,
#model-container,
#model > div,
#model canvas {
    background-color: var(--astral-bg-deep) !important;
}