/* ===========================================================================
   L2Impera Account Panel - site-matched skin
   Loaded last, on top of codebase.css / custom.css / gwstyle.css.
   Reuses the l2awakening site's tokens, fonts, framed panels and ornate
   button art so the panel shares the exact same ambience as the website.
   Site assets are referenced relative to this file:
     ../../../site/l2awakening/images/...
   =========================================================================== */

:root {
    --pm-bg: #0f1416;
    --pm-panel: #1b2226;          /* dark framed panel body            */
    --pm-panel-2: #222c31;        /* panel header / raised surface     */
    --pm-frame: rgba(255, 255, 255, 0.16);  /* decbox-style inset border */
    --pm-line: rgba(223, 198, 131, 0.16);
    --pm-line-soft: rgba(255, 255, 255, 0.08);
    --pm-gold: #dfc683;           /* --color-accent 223,198,131        */
    --pm-gold-2: #ffe59f;         /* accent hover                      */
    --pm-cream: #fff4e1;          /* --color-2  headings               */
    --pm-text: #e6e6e6;           /* --color-0/1 body                  */
    --pm-muted: #c4b8aa;          /* --color-3  muted                  */
    --pm-font-title: "BeaufortforLOL", "Times New Roman", Times, serif;
    --pm-font-body: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    --pm-radius: 4px;
    --pm-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
}

/* ---------- base / background (same texture as the site) ---------- */
body {
    color: var(--pm-text);
    font-family: var(--pm-font-body);
    background-color: var(--pm-bg) !important;
    background-image: url(../../../site/l2awakening/images/bg/bg-repeat.jpg) !important;
    background-size: max(100%, 93.75rem) auto !important;
    background-position: top center !important;
    background-repeat: repeat-y !important;
}
#main-container { padding-bottom: 2rem; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--pm-font-title); }

/* ---------- header (dark, gold rule) ---------- */
#page-header {
    background-color: rgba(15, 18, 20, 0.94) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pm-line);
    box-shadow: 0 10px 30px -22px #000;
}
#page-header .logo__img { height: 34px; width: auto; }
.nav-main-header > li > a {
    color: var(--pm-muted) !important;
    font-family: var(--pm-font-title);
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .04em;
    border-radius: var(--pm-radius);
    transition: color .18s ease, background .18s ease;
}
.nav-main-header > li > a:hover,
.nav-main-header > li.active > a {
    color: var(--pm-gold-2) !important;
    background: rgba(223, 198, 131, 0.08) !important;
}

/* ---------- sidebar ---------- */
#sidebar {
    background: linear-gradient(180deg, #141a1d 0%, #0f1416 100%) !important;
    border-right: 1px solid var(--pm-line);
}
#sidebar .content-header { border-bottom: 1px solid var(--pm-line-soft); }
#sidebar .font-size-xl {
    font-family: var(--pm-font-title);
    letter-spacing: .06em;
    color: var(--pm-gold) !important;
}
.nav-main > li > a {
    color: #cdd3d7 !important;
    border-radius: var(--pm-radius);
    margin: 2px 10px;
    transition: all .16s ease;
    font-family: var(--pm-font-body);
}
.nav-main > li > a > i { color: var(--pm-muted); min-width: 1.25rem; transition: color .16s ease; }
.nav-main > li > a:hover { background: rgba(255, 255, 255, 0.04) !important; color: #fff !important; }
.nav-main > li > a:hover > i { color: var(--pm-gold); }
.nav-main > li > a.active,
.nav-main > li.open > a {
    background: rgba(223, 198, 131, 0.10) !important;
    color: var(--pm-gold-2) !important;
    box-shadow: inset 3px 0 0 var(--pm-gold);
}
.nav-main > li > a.active > i,
.nav-main > li.open > a > i { color: var(--pm-gold-2); }

/* ---------- page headings (cream beaufort, like site .heading__title) --- */
.content-heading {
    font-family: var(--pm-font-title);
    color: var(--pm-cream);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--pm-line);
    padding-bottom: .6rem;
    margin-bottom: 1.35rem;
}

/* ---------- framed panels (decbox ambience) ---------- */
.block {
    position: relative;
    background: var(--pm-panel);
    border: 0;
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow);
    overflow: hidden;
}
/* inset 1px frame like the site's .decbox:after */
.block::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--pm-frame);
    pointer-events: none;
    z-index: 1;
}
.block-header {
    background: var(--pm-panel-2) !important;
    border-bottom: 1px solid var(--pm-line-soft);
    min-height: 3.25rem;
}
/* tame codebase's loud gradient headers into a clean bar + gold underline */
.block-header[class*="bg-gd-"],
.block-header.bg-primary,
.block-header.bg-primary-dark {
    background: var(--pm-panel-2) !important;
    box-shadow: inset 0 -2px 0 rgba(223, 198, 131, 0.4);
}
.block-header.bg-danger { background: #3a2323 !important; box-shadow: inset 0 -2px 0 #c0392b; }
.block-title {
    font-family: var(--pm-font-title);
    color: var(--pm-cream);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1rem;
}
.block-content { color: var(--pm-text); position: relative; z-index: 2; }

/* ---------- buttons: ornate site art for actions ---------- */
/* Primary / action buttons reuse the site's gold button plate (btn-small.png),
   stretched to fit like the site does (background-size:100% 100%). */
.btn-alt-primary,
.btn-primary,
.btn-alt-success,
.btn-alt-info,
.submit-form {
    position: relative;
    z-index: 0;
    background: transparent !important;
    border: 0 !important;
    color: var(--pm-cream) !important;
    font-family: var(--pm-font-title);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    padding: .5rem 1.5rem;
    transition: filter .2s ease, transform .2s ease;
}
.btn-alt-primary::before,
.btn-primary::before,
.btn-alt-success::before,
.btn-alt-info::before,
.submit-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../../../site/l2awakening/images/btn/btn-small.png) center / 100% 100% no-repeat;
    transition: filter .2s ease;
}
.btn-alt-primary:hover::before,
.btn-primary:hover::before,
.btn-alt-success:hover::before,
.btn-alt-info:hover::before,
.submit-form:hover::before { filter: brightness(1.3); }
.btn-alt-primary:hover,
.btn-primary:hover,
.btn-alt-success:hover,
.btn-alt-info:hover,
.submit-form:hover { color: #fff !important; }
/* The site's button language is monochrome gold - keep every action on the
   same gold plate for cohesion; icons + labels carry the meaning. */
.btn[disabled], .btn:disabled { opacity: .5; }
.btn[disabled]::before, .btn:disabled::before { filter: grayscale(60%) brightness(.7); }

/* Secondary / chrome buttons: gold-outline, no art */
.btn-dual-secondary,
.btn-alt-secondary {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--pm-line) !important;
    color: var(--pm-text) !important;
    font-family: var(--pm-font-body);
    border-radius: var(--pm-radius);
    transition: all .18s ease;
}
.btn-dual-secondary:hover,
.btn-dual-secondary.active,
.btn-alt-secondary:hover,
.btn-alt-secondary.active {
    border-color: rgba(223, 198, 131, 0.5) !important;
    color: var(--pm-gold-2) !important;
    background: rgba(223, 198, 131, 0.10) !important;
}
.btn-circle { border-radius: 50%; }

/* language dropdown */
.dropdown-menu {
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius);
}
.dropdown-item { color: var(--pm-text); }
.dropdown-item:hover { background: rgba(223, 198, 131, 0.12); color: var(--pm-gold-2); }
.dropdown-item.active, .dropdown-item:active { background: rgba(223, 198, 131, 0.18); color: var(--pm-gold-2); }

/* ---------- badges ---------- */
.badge { border-radius: 3px; padding: .35em .7em; font-weight: 700; letter-spacing: .02em; font-family: var(--pm-font-body); }
.badge-primary { background: linear-gradient(135deg, var(--pm-gold), #b8923f); color: #1a1407; }
.badge-success { background: rgba(58, 200, 120, 0.18); color: #7ee2a6; }
.badge-secondary { background: rgba(255, 255, 255, 0.08); color: var(--pm-muted); }
.badge-danger { background: rgba(192, 57, 43, 0.22); color: #ef8a7f; }

/* ---------- tables ---------- */
.table { color: var(--pm-text); }
.table thead th {
    border-bottom: 1px solid var(--pm-line) !important;
    color: var(--pm-gold);
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
    font-family: var(--pm-font-body);
}
.table td, .table th { border-color: var(--pm-line-soft) !important; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02); }
.table-vcenter tbody tr:hover { background: rgba(223, 198, 131, 0.06); }

/* ---------- forms ---------- */
.form-control {
    background: #10161a;
    border: 1px solid var(--pm-line-soft);
    border-radius: var(--pm-radius);
    color: var(--pm-text);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus {
    background: #10161a;
    color: #fff;
    border-color: rgba(223, 198, 131, 0.55);
    box-shadow: 0 0 0 3px rgba(223, 198, 131, 0.12);
}
label { color: var(--pm-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; font-family: var(--pm-font-body); }
.alert-warning { background: rgba(223, 198, 131, 0.10); border: 1px solid var(--pm-line); color: var(--pm-cream); border-radius: var(--pm-radius); }

/* ---------- modal ---------- */
.modal-content { background: var(--pm-panel); border: 1px solid var(--pm-line); border-radius: var(--pm-radius); overflow: hidden; }

/* ---------- login / register centered cards ---------- */
.content.content-full .block { box-shadow: 0 24px 60px -30px #000; }

/* ---------- dashboard stat tiles (framed, decbox feel) ---------- */
.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.35rem; }
.pm-tile {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    background: var(--pm-panel);
    padding: 1.1rem 1.25rem;
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow);
    transition: transform .18s ease;
}
.pm-tile::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--pm-frame); pointer-events: none; }
.pm-tile:hover { transform: translateY(-2px); }
.pm-tile__icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: var(--pm-gold-2);
    background: rgba(223, 198, 131, 0.12);
    border: 1px solid rgba(223, 198, 131, 0.28);
}
.pm-tile__label { color: var(--pm-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.pm-tile__value { color: var(--pm-cream); font-size: 1.15rem; font-weight: 700; font-family: var(--pm-font-title); line-height: 1.2; word-break: break-word; }
.pm-tile__value .badge { font-size: .8rem; vertical-align: middle; }
.pm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; position: relative; z-index: 2; }