/* ==========================================================================
   HLstatsX: Community Edition — Modern Black Mesa Dark Theme
   Designed for Half-Life Brasil Community (2026 Edition)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@600;700;900&family=Rajdhani:wght@600;700&family=Share+Tech+Mono&display=swap');

:root {
    --hl-orange: #ff9900;
    --hl-orange-hover: #ffaa22;
    --hl-orange-glow: rgba(255, 153, 0, 0.35);
    --hl-orange-dark: #b36b00;
    
    --bg-body: #0a0c10;
    --bg-card: #12151e;
    --bg-card-alt: #0d1017;
    --bg-card-hover: #1b212f;
    --bg-table-head: #171c28;
    --bg-row-even: #12151e;
    --bg-row-odd: #0f121a;
    
    --border-color: rgba(255, 153, 0, 0.22);
    --border-subtle: #1e2535;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --font-heading: 'Orbitron', 'Rajdhani', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

/* Base Reset & Body */
html, body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}

body {
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(255, 153, 0, 0.07) 0%, transparent 60%),
        linear-gradient(rgba(10, 12, 16, 0.96), rgba(10, 12, 16, 0.98)),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.35) 2px, rgba(0, 0, 0, 0.35) 4px) !important;
    background-attachment: fixed !important;
}

/* Typography Overrides */
tr, td, th, div, span, p, input, select, textarea {
    font-family: var(--font-body);
}

h1, h2, h3, h4, .fTitle, .fHeading {
    font-family: var(--font-heading) !important;
    letter-spacing: 1px;
}

h1 { font-size: 26px !important; color: #fff !important; }
h2 { font-size: 20px !important; color: var(--hl-orange) !important; }
h3 { font-size: 16px !important; color: #fff !important; }

/* Links */
a:link, a:visited {
    color: var(--hl-orange) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
a:hover, a:active {
    color: #ffb84d !important;
    text-shadow: 0 0 8px var(--hl-orange-glow);
}

/* Main Layout Container */
.content {
    background: transparent !important;
    color: var(--text-primary) !important;
    max-width: 1300px !important;
    width: 95% !important;
    margin: 20px auto 40px !important;
    padding: 0 !important;
}

.block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 24px;
}

.subblock {
    width: 100% !important;
    margin: 0 auto !important;
}

/* Header & Banner */
.headerblock {
    background: linear-gradient(180deg, #161b26 0%, #0d1017 100%) !important;
    border-bottom: 2px solid var(--hl-orange) !important;
    height: auto !important;
    min-height: 90px !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.headerblock .title {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 16px;
}

.headerblock .title a {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: 2px !important;
}

.headerblock .title a::before {
    content: "λ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: radial-gradient(circle, #ffaa00 0%, #cc7a00 100%);
    color: #000;
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 0 15px var(--hl-orange-glow);
    border: 2px solid #ffcc66;
}

/* Hide default blurry SourceBans title image */
.headerblock .title img {
    display: none !important;
}

.headerblock .title a::after {
    content: "HALF-LIFE BRASIL // STATS";
    color: #fff;
}

.headertabs {
    margin: 0 !important;
    padding: 0 !important;
}
.headertabs ul {
    display: flex !important;
    gap: 10px !important;
}
.headertabs li {
    display: inline-block !important;
}
.headertabs li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1b212f !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    transition: all 0.2s ease !important;
}
.headertabs li a:hover {
    border-color: var(--hl-orange) !important;
    box-shadow: 0 0 10px var(--hl-orange-glow) !important;
    background: #252d3d !important;
}

/* Breadcrumbs / Location Bar */
.location {
    background: #0d1017 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    height: auto !important;
    padding: 10px 24px !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
}
.location ul {
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
}
.location li {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--text-muted) !important;
}
.location li a {
    color: var(--text-secondary) !important;
}
.location li a:hover {
    color: var(--hl-orange) !important;
}
.location .arrow {
    color: var(--hl-orange) !important;
}
.location_under { display: none !important; }

/* Navigation Tabs (FancyNav) */
nav {
    margin-bottom: 24px !important;
}
ul.fancyNav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}
ul.fancyNav:after, ul.fancyNav li:after {
    display: none !important;
}
ul.fancyNav li {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
}
ul.fancyNav li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
ul.fancyNav li a:hover {
    background: #1c2333 !important;
    border-color: var(--hl-orange) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--hl-orange-glow) !important;
    transform: translateY(-2px);
}
ul.fancyNav li.selected a, ul.fancyNav li a.active {
    background: var(--hl-orange) !important;
    color: #000 !important;
    border-color: var(--hl-orange) !important;
    box-shadow: 0 0 16px var(--hl-orange-glow) !important;
}

/* Headings inside content */
.fHeading {
    font-family: var(--font-heading) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.fHeading img {
    filter: sepia(1) saturate(5) hue-rotate(340deg);
}

.fSmall {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.fNormal {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--text-secondary) !important;
}

/* Data Tables & Rankings */
table.data-table, table.livestats-table, table.ranking-table, table.game-table {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Table Headers */
tr.data-table-head, tr.ranking-table-head, table.data-table tr:first-child:not(.data-table-row) {
    background: var(--bg-table-head) !important;
    border: none !important;
}
tr.data-table-head td, tr.data-table-head th, table.data-table tr:first-child td {
    background: var(--bg-table-head) !important;
    color: var(--hl-orange) !important;
    font-family: var(--font-heading) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 2px solid var(--border-subtle) !important;
}
tr.data-table-head a {
    color: var(--hl-orange) !important;
}

/* Table Rows & Cells */
.bg1, tr.bg1 td, .data-table tr.bg1 td {
    background: var(--bg-row-even) !important;
    color: var(--text-primary) !important;
}
.bg2, tr.bg2 td, .data-table tr.bg2 td {
    background: var(--bg-row-odd) !important;
    color: var(--text-primary) !important;
}
.data-table tr:nth-child(even) td {
    background: var(--bg-row-even) !important;
}
.data-table tr:nth-child(odd) td {
    background: var(--bg-row-odd) !important;
}

.data-table td, .livestats-table td, .game-table-cell {
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

/* Row Hover */
.data-table tr:hover td, .game-table-row:hover td, .livestats-table tr:hover td {
    background: var(--bg-card-hover) !important;
    color: #fff !important;
}

/* Game Table (Servers list) */
.game-table-row {
    background: var(--bg-row-even) !important;
    border: none !important;
}
.game-table-cell b a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.game-table-cell b a:hover {
    color: var(--hl-orange) !important;
}

/* Progress / Accuracy Bars */
.bargraph, .bar, .bar1, .bar2, .bar3, .bar4, .bar5, .bar6 {
    background: linear-gradient(90deg, #cc7a00, #ffaa00) !important;
    border-radius: 4px !important;
    height: 10px !important;
    box-shadow: 0 0 8px var(--hl-orange-glow) !important;
}

/* Forms, Search & Inputs */
input.textbox, input[type="text"], input[type="password"], select, textarea {
    background: #080a0e !important;
    border: 1px solid var(--border-subtle) !important;
    color: #fff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}
input.textbox:focus, input[type="text"]:focus, select:focus {
    border-color: var(--hl-orange) !important;
    box-shadow: 0 0 10px var(--hl-orange-glow) !important;
}

input.submit, input.smallsubmit, input[type="submit"], button {
    background: var(--hl-orange) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
}
input.submit:hover, input[type="submit"]:hover, button:hover {
    background: #ffb84d !important;
    box-shadow: 0 0 15px var(--hl-orange-glow) !important;
    transform: translateY(-2px);
}

/* Player Info Profile Card */
.player-info, #playerinfo {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Player Avatar in Profile */
#player_avatar img {
    border-radius: 10px !important;
    border: 2px solid var(--hl-orange) !important;
    box-shadow: 0 0 16px var(--hl-orange-glow) !important;
    object-fit: cover !important;
}

/* Activity Meter */
meter {
    width: 90% !important;
    min-width: 80px !important;
    height: 10px !important;
    background: #090c12 !important;
    border-radius: 5px !important;
    border: 1px solid var(--border-subtle) !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}
meter::-webkit-meter-bar {
    background: #090c12 !important;
    border-radius: 5px !important;
}
meter::-webkit-meter-optimum-value {
    background: linear-gradient(90deg, #b36b00, #ff9900) !important;
    border-radius: 4px !important;
}
meter::-moz-meter-bar {
    background: linear-gradient(90deg, #b36b00, #ff9900) !important;
    border-radius: 4px !important;
}

/* Subsection & Profile Tabs */
#main ul.subsection_tabs, ul.subsection_tabs, ul.register_tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-bottom: 2px solid var(--border-subtle) !important;
    height: auto !important;
    padding: 0 0 12px 0 !important;
    margin: 16px 0 !important;
    list-style: none !important;
}

#main ul.subsection_tabs li, ul.subsection_tabs li, ul.register_tabs li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main ul.subsection_tabs li a, ul.subsection_tabs li a, ul.register_tabs li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 38px !important;
    width: auto !important;
    padding: 8px 18px !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

#main ul.subsection_tabs li a:hover, ul.subsection_tabs li a:hover, ul.register_tabs li a:hover {
    background-color: #1f2738 !important;
    border-color: var(--hl-orange) !important;
    color: #fff !important;
    box-shadow: 0 0 10px var(--hl-orange-glow) !important;
}

#main ul.subsection_tabs li a.active, ul.subsection_tabs li a.active, ul.register_tabs li a.active {
    background-color: var(--hl-orange) !important;
    color: #000 !important;
    border-color: var(--hl-orange) !important;
    box-shadow: 0 0 14px var(--hl-orange-glow) !important;
}

/* Warnings and Errors */
.errorhead, .warning-heading {
    background: #b00020 !important;
    color: #fff !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    border-radius: 6px 6px 0 0 !important;
}

.errortext, .warning-text {
    background: #1a0808 !important;
    color: #fca5a5 !important;
    border: 1px solid #7f1d1d !important;
    border-top: none !important;
    padding: 14px 16px !important;
    border-radius: 0 0 6px 6px !important;
}

/* Sorting and Indicator Icons */
img[src*="sort-descending.gif"], img[src*="sort-ascending.gif"], img[src*="downarrow.gif"] {
    filter: invert(0.8) sepia(1) saturate(5) hue-rotate(345deg);
}

.headertabs li a img {
    filter: brightness(1.3) contrast(1.1);
}

/* Server Load & Trend Graphs */
img[title*="Graph"], img[alt*="Graph"] {
    border-radius: 8px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Leaflet Map */
#map, div[id="map"] {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Footer Styling */
#footer {
    border-top: 1px solid var(--border-subtle) !important;
    padding-top: 24px !important;
    margin-top: 40px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
}
#footer a {
    color: var(--text-secondary) !important;
}
#footer a:hover {
    color: var(--hl-orange) !important;
}
#footer img {
    filter: grayscale(1) opacity(0.5);
    transition: all 0.2s ease;
}
#footer img:hover {
    filter: none;
    opacity: 1;
}

/* Mobile Responsive Tweaks */
@media screen and (max-width: 768px) {
    .headerblock {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    .headerblock .title {
        justify-content: center !important;
    }
    ul.fancyNav {
        justify-content: center !important;
    }
    table.data-table, table.livestats-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}