/*!
 * ============================================================================
 * Legend Killers - Custom AMXBans Implementation
 * Copyright (c) 2026 Legend Killers. All rights reserved.
 * ============================================================================
 * 
 * PROPRIETARY MODIFICATIONS INCLUDE:
 * - Custom dark theme and UI design
 * - Security vulnerability fixes (credential exposure prevention)
 * - Ban evader tracking and detection system
 * - Quick unban functionality fixes
 * - Administrative logging system
 * - Various functionality repairs from original installation
 * 
 * These customizations, security fixes, and feature additions are the 
 * intellectual property of Legend Killers. Unauthorized reproduction,
 * distribution, or use is prohibited.
 * 
 * Based on AMXBans - Original AMXBans code remains under its respective license.
 * 
 * ============================================================================
 */

/*
 * AMXBans Theme - Based on Hentai-Squad Style
 * Dark semi-transparent theme for legend-killers.com
 */

/* ================================================================
   BACKGROUND IMAGE
================================================================ */
body {
    background: #1a1a1a url('../_gfx/rias.png') no-repeat center top fixed !important;
    background-size: cover !important;
    color: #ffffff !important;
    min-height: 100vh;
    overflow-x: hidden !important;
}

/* Prevent horizontal scroll on html */
html {
    overflow-x: hidden !important;
    background: #1a1a1a !important;
}

/* ================================================================
   SEMI-TRANSPARENT CONTENT AREA - 0.30 opacity
================================================================ */
.main,
#site .main,
.content,
#site .content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: rgba(25, 25, 25, 0.30) !important;
    padding: 15px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
}

#site {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 60px !important;
}

.content {
    background: rgba(30, 30, 30, 0.30) !important;
    border-radius: 4px !important;
}

#wrapper,
.wrapper,
.container,
#container,
#content,
.page-content {
    height: auto !important;
    min-height: 0 !important;
}

/* ================================================================
   NAVIGATION BAR - CENTERED NAV, RIGHT LOGIN
================================================================ */
#network {
    background: rgba(20, 20, 20, 0.95) !important;
    border-bottom: 1px solid #444 !important;
    padding: 10px 20px !important;
    position: relative !important;
    min-width: fit-content !important;
}

#network .center-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#network .center-wrapper .clearer {
    display: none !important;
}

#network .left {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Login form - absolute position to right */
#network .right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#network ul.tabbed {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

#network ul.tabbed li {
    list-style: none !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Navigation button style - Pure Red Glassmorphism with Outline */
#network ul.tabbed li a {
    display: block !important;
    background: radial-gradient(circle, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow:
        0 0 15px rgba(220, 38, 38, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

#network ul.tabbed li a:hover {
    background: radial-gradient(circle, #f87171 0%, #ef4444 40%, #dc2626 70%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

#network ul.tabbed li.current-tab a {
    background: radial-gradient(circle, #f87171 0%, #ef4444 40%, #dc2626 70%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ================================================================
   HIDE DUPLICATE BUTTONS IN LEFT MENU
================================================================ */
#menu-tabs > li > a[href="logout.php"],
#menu-tabs li a[href="logout.php"],
ul#menu-tabs a[href="logout.php"] {
    display: none !important;
}

#menu-tabs > li:has(> a[href="logout.php"]) {
    display: none !important;
}

#menu-tabs > li > a[href="login.php"],
#menu-tabs li a[href="login.php"],
ul#menu-tabs a[href="login.php"] {
    display: none !important;
}

#menu-tabs > li:has(> a[href="login.php"]) {
    display: none !important;
}

/* ================================================================
   LOGIN FORM (when logged out)
================================================================ */
#network #admin-tabs {
    display: flex !important;
    align-items: center !important;
}

#network #admin-tabs li {
    display: flex !important;
    align-items: center !important;
}

#network form[name="loginform"],
#admin-tabs form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#network form[name="loginform"] input[type="text"],
#network form[name="loginform"] input[type="password"],
#admin-tabs input[type="text"],
#admin-tabs input[type="password"] {
    background: linear-gradient(to bottom, #3a3a3a, #252525) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    width: 110px !important;
    box-sizing: border-box !important;
}

#network form[name="loginform"] input[type="text"]:focus,
#network form[name="loginform"] input[type="password"]:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
    outline: none !important;
}

/* Login button - Pure Red Glassmorphism with Outline */
#network form[name="loginform"] button,
#network form[name="loginform"] input[type="submit"],
#admin-tabs button,
#admin-tabs input[type="submit"] {
    background: radial-gradient(circle, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: 80px !important;
    box-sizing: border-box !important;
    box-shadow:
        0 0 15px rgba(220, 38, 38, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

#network form[name="loginform"] button:hover,
#network form[name="loginform"] input[type="submit"]:hover,
#admin-tabs button:hover,
#admin-tabs input[type="submit"]:hover {
    background: radial-gradient(circle, #f87171 0%, #ef4444 40%, #dc2626 70%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

#network input[type="checkbox"] {
    margin: 0 3px !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   LANGUAGE DROPDOWN - Pure Red Glassmorphism Style
================================================================ */
#network ul.tabbed li form {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#network select,
#network ul.tabbed select,
#network ul.tabbed li select,
select.lang-select {
    background-color: #b91c1c !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 10px center, center !important;
    background-size: 12px 12px, 100% 100% !important;
    color: #fff !important;
    padding: 9px 30px 9px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transition: all 0.3s ease !important;
    box-shadow:
        0 0 15px rgba(220, 38, 38, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#network select:hover,
#network ul.tabbed select:hover,
#network ul.tabbed li select:hover {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, #f87171 0%, #ef4444 40%, #dc2626 70%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

#network select option,
select option {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* ================================================================
   GLOBAL SELECT/DROPDOWN STYLING - All pages
================================================================ */
select {
    background-color: #991b1b !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 10px center, center !important;
    background-size: 12px 12px, 100% 100% !important;
    color: #fff !important;
    padding: 8px 30px 8px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1.4 !important;
    transition: all 0.3s ease !important;
    box-shadow:
        0 0 10px rgba(220, 38, 38, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

select:hover {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, #f87171 0%, #ef4444 40%, #dc2626 70%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

select:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Dropdown options - limited browser support but helps where supported */
select option {
    background: #1f1f1f !important;
    color: #fff !important;
    padding: 10px !important;
    border-bottom: 1px solid #333 !important;
}

select option:hover,
select option:focus,
select option:checked {
    background: linear-gradient(to right, #dc2626, #b91c1c) !important;
    color: #fff !important;
}

select optgroup {
    background: #2a2a2a !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-style: normal !important;
    padding: 8px !important;
}

/* Disabled select styling */
select:disabled,
select[disabled] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
    color: #888 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 0.8 !important;
}

/* Single-row select with size="1" - keep normal styling */
select[size="1"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    min-height: auto !important;
    height: auto !important;
}

/* Multi-select dropdowns - auto-sizing based on content */
select[multiple],
select[size="2"],
select[size="3"],
select[size="4"],
select[size="5"] {
    background-image: radial-gradient(circle at center, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    padding: 4px !important;
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
}

/* Cap height for larger multi-selects */
select[size="4"],
select[size="5"],
select[size="6"],
select[size="7"],
select[size="8"],
select[size="9"],
select[size="10"] {
    max-height: 150px !important;
}

select[multiple] option,
select[size="2"] option,
select[size="3"] option,
select[size="4"] option,
select[size="5"] option {
    padding: 6px 10px !important;
    margin: 2px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

select[multiple] option:checked,
select[size="2"] option:checked,
select[size="3"] option:checked,
select[size="4"] option:checked,
select[size="5"] option:checked {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* ================================================================
   ADMIN AREA NAVIGATION - Main Menu (Admin area, Server, Web, etc.)
================================================================ */
#navigation #main-nav ul.tabbed li a {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 8px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
}

#navigation #main-nav ul.tabbed li a:hover {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 12px rgba(0, 0, 0, 0.9) !important;
}

/* ================================================================
   SUB NAVIGATION (Admins, User Levels, User Menu, Settings, etc.)
================================================================ */
#sub-nav {
    background: rgba(50, 45, 47, 0.40) !important;
    border: none !important;
    border-radius: 4px !important;
}

#sub-nav a {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 8px rgba(0, 0, 0, 0.8) !important;
    font-weight: 600 !important;
}

#sub-nav a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 12px rgba(0, 0, 0, 0.9) !important;
}

/* ================================================================
   TABLE HEADER - 0.40 opacity
================================================================ */
.main thead, thead {
    background-color: rgba(50, 45, 47, 0.40) !important;
}

.main thead th, thead th {
    color: #ffffff !important;
    background: transparent !important;
    padding: 12px 10px !important;
}

/* ================================================================
   BAN LIST ROWS - 0.20 opacity
================================================================ */
tr.list {
    background-color: rgba(20, 20, 20, 0.20) !important;
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
    cursor: pointer;
}

tr.list:hover {
    background: rgba(50, 50, 50, 0.40) !important;
}

tr.list td {
    color: #fff !important;
    border: none !important;
    padding: 10px !important;
    background: transparent !important;
}

/* ================================================================
   BAN DETAILS (Expanded) - 0.25 opacity
================================================================ */
td.server-info,
.server-info,
tr.server-info td,
tr td.server-info {
    background: rgba(20, 20, 20, 0.32) !important;
    padding: 20px 30px !important;
}

td.server-info > div {
    background: transparent !important;
}

td.server-info table,
.server-info table {
    background: rgba(25, 25, 25, 0.32) !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
}

td.server-info table tr,
.server-info table tr {
    background: transparent !important;
}

td.server-info table td,
.server-info table td {
    background: transparent !important;
    color: #ccc !important;
    border: none !important;
    border-bottom: 1px solid #444 !important;
    padding: 8px 12px !important;
}

td.server-info table td:first-child {
    font-weight: bold !important;
    color: #fff !important;
    width: 180px !important;
}

td.server-info table thead,
.server-info table thead {
    background: rgba(40, 40, 40, 0.30) !important;
}

td.server-info table thead th {
    background: transparent !important;
}

/* ================================================================
   ALL TABLES - 0.20 opacity
================================================================ */
table,
.main table,
#site table {
    background: rgba(25, 25, 25, 0.20) !important;
}

tbody,
.main tbody {
    background: transparent !important;
}

/* ================================================================
   IP CHECK BAR - Positioned in header left side
================================================================ */
.ip-check-bar {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.ip-check-bar.not-banned {
    background: linear-gradient(135deg, #166534 0%, #15803d 50%, #22c55e 100%) !important;
}

.ip-check-bar.banned {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #dc2626 100%) !important;
}

.ip-check-bar .status {
    font-weight: 700 !important;
}

.ip-check-bar.not-banned .status {
    color: #bbf7d0 !important;
}

.ip-check-bar.banned .status {
    color: #fecaca !important;
}

/* ================================================================
   SECTION BOXES - 0.30 opacity
================================================================ */
.section {
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.section-title {
    background: rgba(50, 45, 47, 0.40) !important;
    color: #ffffff !important;
    padding: 10px 15px !important;
}

.section-content {
    background: rgba(30, 30, 30, 0.50) !important;
    padding: 15px !important;
}

/* ================================================================
   VIEW.PHP - Server List & Sidebar Readability
================================================================ */
/* Server list rows - default state */
#main-two-columns tbody tr,
#main-two-columns tbody tr.m_out {
    background: rgba(20, 20, 20, 0.40) !important;
    color: #fff !important;
    cursor: pointer;
}

#main-two-columns tbody tr td,
#main-two-columns tbody tr.m_out td {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000 !important;
    padding: 10px 8px !important;
}

/* Server list rows - hover state */
#main-two-columns tbody tr.m_over,
#main-two-columns tbody tr:hover {
    background: rgba(220, 38, 38, 0.3) !important;
}

#main-two-columns tbody tr.m_over td,
#main-two-columns tbody tr:hover td {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000 !important;
}

/* Offline server rows */
#main-two-columns tbody tr.offline td {
    color: #999 !important;
    font-style: italic;
}

/* Sidebar nice-list styling */
.nice-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nice-list li {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nice-list li:last-child {
    border-bottom: none !important;
}

.nice-list li .left {
    color: #ccc !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.nice-list li .right {
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Section title styling */
.section-title .left,
.section-title .right {
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000 !important;
}

/* ================================================================
   LINKS - Red Theme
================================================================ */
a {
    color: #ef4444 !important;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

a:hover {
    color: #f87171 !important;
    text-shadow: 0 0 15px rgba(248, 113, 113, 0.5) !important;
}

/* ================================================================
   FORMS
================================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    background-color: rgba(45, 45, 45, 0.50) !important;
    border: 1px solid #555 !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 3px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5) !important;
}

/* ================================================================
   BUTTONS - Pure Red Glassmorphism with Outline
================================================================ */
.btn,
.button,
input.button,
input[type="submit"],
input[type="button"],
button {
    background: radial-gradient(circle, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow:
        0 0 15px rgba(220, 38, 38, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(4px) !important;
}

.btn:hover,
.button:hover,
input.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: radial-gradient(circle, #f87171 0%, #ef4444 40%, #dc2626 70%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.btn:active,
.button:active,
input.button:active,
input[type="submit"]:active,
input[type="button"]:active,
button:active {
    transform: translateY(0) !important;
    box-shadow:
        0 0 10px rgba(220, 38, 38, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ================================================================
   PAGINATION
================================================================ */
/* Fix pager margin - override inline 500px */
.pager,
div.pager {
    margin-top: auto !important;
}

.pager a,
.pager span {
    background: rgba(50, 45, 47, 0.40) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    transition: all 0.3s ease !important;
}

.pager a:hover {
    background: radial-gradient(circle, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5) !important;
}

.paginator span strong {
    background: radial-gradient(circle, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5) !important;
}

.paginator span a {
    background: rgba(50, 45, 47, 0.40) !important;
    color: #ccc !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    transition: all 0.3s ease !important;
}

.paginator span a:hover {
    background: radial-gradient(circle, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5) !important;
}

/* ================================================================
   FOOTER
================================================================ */
#footer,
#footer-content {
    background: rgba(20, 20, 20, 0.90) !important;
    color: #999 !important;
    border-top: 1px solid #444 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 15px 0 !important;
}

#footer a,
#footer-content a {
    color: #ef4444 !important;
}

#footer a:hover,
#footer-content a:hover {
    color: #f87171 !important;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.5) !important;
}

/* ================================================================
   SETTINGS / CONFIG TABLES - 0.20 opacity
================================================================ */
tr.settings_line {
    background-color: rgba(30, 30, 30, 0.20) !important;
    border-bottom: 1px solid #555 !important;
}

tr.settings_line:hover {
    background-color: rgba(50, 50, 50, 0.40) !important;
}

tr.htable,
tr.htabletop {
    background: rgba(50, 45, 47, 0.40) !important;
    color: #fff !important;
}

tr.htablebottom {
    background: rgba(30, 30, 30, 0.20) !important;
}

/* ================================================================
   WELL BOXES
================================================================ */
.well {
    background-color: rgba(30, 30, 30, 0.30) !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
}

/* ================================================================
   FIELDSET
================================================================ */
fieldset {
    background: rgba(30, 30, 30, 0.30) !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
}

legend {
    color: #ef4444 !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

/* ================================================================
   MISC
================================================================ */
.quiet {
    color: #999 !important;
}

.title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Scrollbar - Pure Red Theme */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #1d1d1d;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
}

/* ================================================================
   DISABLED BUTTONS
================================================================ */
.btn:disabled,
.button:disabled,
input.button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:disabled,
.btn[disabled],
.button[disabled],
input.button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
button[disabled] {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
    color: #888 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
}

.btn:disabled:hover,
.button:disabled:hover,
input.button:disabled:hover,
input[type="submit"]:disabled:hover,
input[type="button"]:disabled:hover,
button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ================================================================
   MOBILE RESPONSIVE - Ban List
================================================================ */

@media screen and (max-width: 1024px) {
    /* Full width layout */
    .center-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    /* Header bar - full width */
    #network {
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Center wrapper as flex to flow all items */
    #network .center-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* IP bar at top - full width to force new row */
    .ip-check-bar {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    /* Left and right - block, centered with spacing */
    #network .left {
        float: none !important;
        position: static !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    #network .right {
        float: none !important;
        position: static !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    /* Hide clearer */
    #network .clearer {
        display: none !important;
    }

    /* Nav lists wrap */
    #network ul.tabbed,
    #network #menu-tabs,
    #network #admin-tabs {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    /* Each li */
    #network ul.tabbed li {
        float: none !important;
        margin: 0 !important;
        display: inline-flex !important;
    }

    /* HIDE duplicate login/logout in left menu - must override above */
    #menu-tabs li:has(> a[href="logout.php"]),
    #menu-tabs li:has(> a[href="login.php"]) {
        display: none !important;
    }

    /* Language dropdown - compact */
    #network ul.tabbed li form {
        margin: 0 !important;
    }

    #network select,
    #network ul.tabbed select,
    #network ul.tabbed li select,
    #network ul.tabbed li form select,
    select.lang-select,
    #menu-tabs select,
    #menu-tabs li select {
        width: auto !important;
        min-width: 40px !important;
        max-width: 60px !important;
        padding: 0 18px 0 5px !important;
        font-size: 7px !important;
        height: 22px !important;
        line-height: 20px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        vertical-align: middle !important;
        text-align: left !important;
        text-align-last: left !important;
        background-position: right 4px center !important;
        background-size: 8px !important;
    }

    /* Nav buttons - match dropdown height */
    #network ul.tabbed li a,
    #menu-tabs li a,
    #admin-tabs li a {
        padding: 5px 6px !important;
        font-size: 7px !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        border-radius: 8px !important;
        border-width: 1px !important;
    }

    /* Admin tabs inline with menu */
    #network #admin-tabs {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    #network form[name="loginform"] {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    #network form[name="loginform"] input[type="text"],
    #network form[name="loginform"] input[type="password"] {
        width: 70px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    #network form[name="loginform"] button,
    #network form[name="loginform"] input[type="submit"] {
        padding: 6px 10px !important;
        font-size: 9px !important;
    }

    /* Hide remember checkbox on mobile */
    #network input[type="checkbox"],
    #network input[type="checkbox"] + label {
        display: none !important;
    }

    /* Clear floats */
    #network .clearer {
        display: none !important;
    }

    /* Main content area */
    #site {
        padding-bottom: 50px !important;
    }

    #site .center-wrapper {
        padding: 5px !important;
    }

    .main,
    #site .main,
    .content {
        padding: 5px !important;
    }

    /* TABLE - Horizontal scroll */
    .main {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 550px !important;
        font-size: 11px !important;
    }

    /* IMPORTANT: Don't override inline display:none on hidden rows */
    tr[style*="display:none"],
    tr[style*="display: none"] {
        display: none !important;
    }

    /* Smaller cells */
    th, td,
    .main thead th,
    tr.list td {
        padding: 6px 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Ban details section - when expanded */
    td.server-info {
        white-space: normal !important;
        padding: 10px !important;
    }

    td.server-info table {
        min-width: auto !important;
        width: 100% !important;
    }

    td.server-info td {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Pagination */
    .pager,
    div.pager {
        font-size: 11px !important;
    }

    .pager a,
    .pager span {
        padding: 4px 8px !important;
    }

    /* Footer */
    #footer,
    #footer-content {
        position: relative !important;
        padding: 8px 5px !important;
        font-size: 10px !important;
    }
}

/* Extra small - phones */
@media screen and (max-width: 480px) {
    #network ul.tabbed li a {
        padding: 5px 8px !important;
        font-size: 8px !important;
    }

    #network select,
    #network ul.tabbed select {
        min-width: 70px !important;
        max-width: 85px !important;
        font-size: 8px !important;
        padding: 5px 20px 5px 6px !important;
    }

    #network form[name="loginform"] input[type="text"],
    #network form[name="loginform"] input[type="password"] {
        width: 60px !important;
        font-size: 9px !important;
        padding: 5px 6px !important;
    }

    #network form[name="loginform"] button {
        padding: 5px 8px !important;
        font-size: 8px !important;
    }

    table {
        min-width: 480px !important;
        font-size: 10px !important;
    }

    th, td {
        padding: 4px 3px !important;
        font-size: 10px !important;
    }

    .ip-check-bar {
        font-size: 10px !important;
    }
}

/* ================================================================
   MOBILE - Admin Pages
================================================================ */
@media screen and (max-width: 1024px) {
    /* Site content scrolls horizontally, not the whole page */
    #site {
        overflow-x: auto !important;
        max-width: 100vw !important;
    }

    /* Keep header from scrolling */
    #network {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Admin navigation tabs */
    #navigation {
        margin-bottom: 10px !important;
    }

    #navigation #main-nav ul.tabbed {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    #navigation #main-nav ul.tabbed li {
        float: none !important;
        background: none !important;
    }

    #navigation #main-nav ul.tabbed li a {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    /* Sub navigation */
    #sub-nav {
        padding: 5px !important;
    }

    #sub-nav ul.tabbed {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    #sub-nav ul.tabbed li {
        float: none !important;
    }

    #sub-nav a {
        padding: 5px 8px !important;
        font-size: 9px !important;
    }

    /* Admin forms */
    .section {
        margin-bottom: 10px !important;
    }

    .section-content {
        padding: 8px !important;
    }

    /* Admin tables - horizontal scroll */
    .main table,
    .section table,
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* Form inputs full width */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Settings rows */
    tr.settings_line td {
        padding: 6px !important;
        font-size: 11px !important;
    }

    /* Buttons smaller */
    .btn,
    .button,
    input.button,
    input[type="submit"],
    input[type="button"],
    button {
        padding: 6px 12px !important;
        font-size: 10px !important;
    }
}