/*
 * KZG V4.3 — ELITE UX / LIVE CONTEXT LAYER
 * Loaded after V4.2.  Dark-only production design.
 */

:root {
    --k43-bg: #050914;
    --k43-bg-deep: #030711;
    --k43-panel: rgba(7, 16, 31, .965);
    --k43-panel-hi: rgba(10, 23, 43, .97);
    --k43-line: rgba(73, 94, 145, .30);
    --k43-line-hi: rgba(91, 116, 181, .44);
    --k43-text: #f4f7fd;
    --k43-muted: #99a8c1;
    --k43-blue: #397cff;
    --k43-cyan: #18c7e8;
    --k43-green: #0bd889;
    --k43-red: #ff3c5d;
    --k43-purple: #8b5cff;
    --k43-discord: #5865f2;
    --k43-rail: 82px;
}

/* ============================================================
   1. DARK THEME IS AUTHORITATIVE
   ============================================================ */

html.kzg-v43-dark,
html.kzg-v43-dark body,
body.kzg-v43-dark,
body.kzg-v43-ready {
    color-scheme: dark !important;
    background-color: var(--k43-bg) !important;
    color: var(--k43-text) !important;
}

body.kzg-v43-ready .sidebar-wrapper,
body.kzg-v43-ready .profile-info,
body.kzg-v43-ready .card,
body.kzg-v43-ready .widget-content-area,
body.kzg-v43-ready .form-control,
body.kzg-v43-ready .form-select,
body.kzg-v43-ready textarea,
body.kzg-v43-ready input:not([type="checkbox"]):not([type="radio"]),
body.kzg-v43-ready .modal-content {
    color-scheme: dark !important;
}

/* Extra guard against the upstream light-mode state leaking white/grey surfaces. */
body.kzg-v43-ready .kzg-v4-sidebar .profile-info,
body.kzg-v43-ready .kzg-v4-sidebar .user-info {
    color: var(--k43-text) !important;
    background: linear-gradient(145deg, rgba(5, 14, 29, .96), rgba(4, 10, 22, .96)) !important;
}

body.kzg-v43-ready .kzg-v4-sidebar .profile-content h6 {
    color: #f8faff !important;
}

body.kzg-v43-ready .kzg-v4-sidebar .profile-content p {
    color: #8fa0bb !important;
}

/* ============================================================
   2. TOP NAV — DISCORD REPLACES BROKEN LIGHT TOGGLE
   ============================================================ */

.kzg-v43-discord-nav {
    display: flex !important;
    align-items: center;
}

.kzg-v43-discord-nav .nav-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 1px;
    padding: 0 !important;
    color: #cfd5ff !important;
    background: linear-gradient(145deg, rgba(64, 76, 190, .18), rgba(24, 36, 83, .24)) !important;
    border: 1px solid rgba(99, 112, 238, .30) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.kzg-v43-discord-nav .nav-link::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 5px;
    height: 5px;
    background: #52e38b;
    border: 1px solid rgba(3, 8, 18, .95);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(82, 227, 139, .58);
}

.kzg-v43-discord-nav .nav-link i {
    font-size: 17px;
}

.kzg-v43-discord-nav .nav-link:hover,
.kzg-v43-discord-nav .nav-link:focus-visible {
    color: #fff !important;
    background: linear-gradient(145deg, rgba(88, 101, 242, .34), rgba(38, 49, 128, .32)) !important;
    border-color: rgba(116, 127, 255, .62) !important;
    box-shadow: 0 7px 20px rgba(49, 58, 176, .18), inset 0 1px rgba(255,255,255,.07);
    transform: translateY(-1px);
}

/* V4.3 removes the upstream theme switch completely. */
.header-container .theme-toggle-item,
.header-container .theme-toggle {
    display: none !important;
}

/* ============================================================
   3. SIDEBAR — SEMANTIC COLOUR + SUPPORT + SETTINGS READABILITY
   ============================================================ */

.kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle i:first-child {
    color: #875cff !important;
}

.kzg-v4-sidebar .menu-categories li.menu:nth-child(1) > .dropdown-toggle i:first-child {
    color: #7b85ff !important;
}

.kzg-v4-sidebar .menu-categories li.menu:nth-child(2) > .dropdown-toggle i:first-child {
    color: #4cc8ff !important;
}

.kzg-v4-sidebar .menu-categories li.menu.kzg-ban-link > .dropdown-toggle i:first-child {
    color: var(--k43-red) !important;
}

.kzg-v43-support-link > .dropdown-toggle i:first-child {
    color: #7180ff !important;
}

.kzg-v43-support-link > .dropdown-toggle:hover {
    background: rgba(88, 101, 242, .13) !important;
    border-color: rgba(102, 116, 250, .25) !important;
}

.kzg-v43-external {
    margin-left: auto;
    color: #657493 !important;
    font-size: 8px !important;
}

/* Settings submenu becomes an intentional inset navigation surface. */
.kzg-v4-sidebar #kzgV4ToolsSection {
    position: relative;
    margin: 5px 3px 8px 18px !important;
    padding: 7px 7px 7px 12px !important;
    background: linear-gradient(180deg, rgba(10, 18, 36, .72), rgba(5, 12, 26, .61)) !important;
    border: 1px solid rgba(78, 91, 143, .18) !important;
    border-left: 1px solid rgba(101, 84, 213, .46) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.014), 0 8px 20px rgba(0,0,0,.08);
}

.kzg-v4-sidebar #kzgV4ToolsSection::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, rgba(91, 91, 255, .06), rgba(111, 78, 245, .72), rgba(233, 47, 110, .20));
    border-radius: 4px;
}

.kzg-v4-sidebar #kzgV4ToolsSection li {
    margin: 1px 0 !important;
}

.kzg-v4-sidebar #kzgV4ToolsSection li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 34px !important;
    padding: 7px 9px 7px 11px !important;
    color: #bdc8da !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-size: 10.8px !important;
    letter-spacing: .008em;
    transition: color .14s ease, background .14s ease, border-color .14s ease, transform .14s ease;
}

.kzg-v4-sidebar #kzgV4ToolsSection li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin-right: 9px;
    background: #53617b;
    border-radius: 50%;
    transition: background .14s ease, box-shadow .14s ease;
}

.kzg-v4-sidebar #kzgV4ToolsSection li > a:hover {
    color: #f4f7fd !important;
    background: rgba(72, 82, 154, .13) !important;
    border-color: rgba(98, 101, 185, .16) !important;
    transform: translateX(1px);
}

.kzg-v4-sidebar #kzgV4ToolsSection li > a:hover::before {
    background: #7c71ff;
    box-shadow: 0 0 8px rgba(124, 113, 255, .42);
}

.kzg-v4-sidebar #kzgV4ToolsSection li.active > a {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(84, 73, 205, .30), rgba(70, 69, 151, .12)) !important;
    border-color: rgba(106, 94, 225, .28) !important;
}

.kzg-v4-sidebar #kzgV4ToolsSection li.active > a::before {
    background: #9c76ff;
    box-shadow: 0 0 9px rgba(156, 118, 255, .62);
}

/* Count pills should inform, not dominate. */
.kzg-v4-menu-count {
    min-width: 29px !important;
    padding: 3px 7px !important;
    color: #dfe7f7 !important;
    background: rgba(30, 45, 70, .86) !important;
    border-color: rgba(101, 121, 161, .31) !important;
    box-shadow: none !important;
}

/* ============================================================
   4. FOUR COMPACT LIVE STAT CARDS
   ============================================================ */

body.kzg-dashboard-v4 .kzg-modern-stats {
    width: 63% !important;
    max-width: 1020px !important;
    gap: 8px !important;
    padding-right: 8px !important;
}

body.kzg-dashboard-v4 .kzg-modern-stats > [class*="col-"] {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Undo V4.2's fourth-child hide only for our real Players Online card. */
body.kzg-dashboard-v4 .kzg-modern-stats > .kzg-v43-players-stat {
    display: block !important;
}

body.kzg-dashboard-v4 .kzg-modern-stats .card {
    height: 74px !important;
    min-height: 74px !important;
    border-radius: 8px !important;
}

body.kzg-dashboard-v4 .kzg-modern-stats .card-body {
    padding: 8px 10px !important;
}

body.kzg-dashboard-v4 .kzg-modern-stats .card h1 {
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -.025em;
}

body.kzg-dashboard-v4 .kzg-modern-stats .card p {
    margin-top: 3px !important;
    font-size: 9.8px !important;
    color: #a7b4c9 !important;
}

body.kzg-dashboard-v4 .kzg-modern-stats .card .align-self-center > i {
    font-size: 24px !important;
}

.kzg-v43-players-stat .card {
    --k42-accent: 24, 199, 232 !important;
    border-color: rgba(24, 199, 232, .44) !important;
    background:
        radial-gradient(circle at 13% 50%, rgba(24, 199, 232, .12), transparent 31%),
        linear-gradient(145deg, rgba(7, 20, 38, .97), rgba(5, 13, 28, .985)) !important;
}

.kzg-v43-players-stat .kzg-v43-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #53e8ff !important;
    background: linear-gradient(145deg, rgba(12, 87, 109, .54), rgba(5, 38, 60, .76));
    border: 1px solid rgba(50, 216, 240, .25);
    border-radius: 9px;
    box-shadow: 0 0 17px rgba(17, 196, 225, .14), inset 0 1px rgba(255,255,255,.04);
}

.kzg-v43-players-stat .kzg-v43-stat-icon i {
    color: #48def6 !important;
    font-size: 18px !important;
}

.kzg-v43-players-stat .kzg-v43-stat-copy {
    align-self: center;
}

/* ============================================================
   5. REAL LOCAL MAP THUMBNAILS — COMPACT, LAZY, NON-DISRUPTIVE
   ============================================================ */

#serverList td:first-child {
    white-space: nowrap;
}

.kzg-v43-map-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    margin: -2px 9px -2px 0;
    overflow: hidden;
    vertical-align: middle;
    color: #6e84aa;
    background:
        linear-gradient(135deg, rgba(14, 31, 55, .92), rgba(5, 15, 29, .96)),
        radial-gradient(circle at 30% 20%, rgba(44, 122, 188, .16), transparent 50%);
    border: 1px solid rgba(73, 102, 150, .38);
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0,0,0,.16);
}

.kzg-v43-map-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(2, 8, 17, .13), transparent 48%, rgba(3, 7, 15, .13));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}

.kzg-v43-map-thumb img {
    display: block;
    width: 52px !important;
    height: 30px !important;
    object-fit: cover;
    filter: saturate(.88) contrast(1.04) brightness(.84);
    transition: filter .16s ease, transform .18s ease;
}

#serverList tr:hover .kzg-v43-map-thumb img {
    filter: saturate(1.02) contrast(1.05) brightness(.96);
    transform: scale(1.035);
}

.kzg-v43-map-thumb.is-fallback i {
    position: relative;
    z-index: 1;
    font-size: 13px;
    opacity: .75;
}

/* Keep rows dense despite the image. */
.kzg-modern-server-section #serverList > tr > td {
    min-height: 38px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle !important;
}

/* ============================================================
   6. CONTEXT-AWARE RECENT BANS / MUTES
   ============================================================ */

.kzg-modern-recent .card.kzg-v43-contextual {
    border-color: rgba(77, 105, 177, .40) !important;
}

.kzg-modern-recent .card.kzg-v43-contextual .kzg-v4-panel-title small {
    color: #82a8e7 !important;
}

.kzg-v43-search-context {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.kzg-v43-empty-row td {
    height: 102px !important;
    padding: 18px !important;
    color: #7586a1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.kzg-v43-empty-row td i {
    display: block;
    margin-bottom: 8px;
    color: #5f7192;
    font-size: 18px;
}

.kzg-v43-empty-row td span {
    display: block;
    font-size: 10px;
}

.kzg-v43-permanent {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 7px;
    color: #fff;
    background: linear-gradient(180deg, #ff536a, #ef3f59);
    border: 1px solid rgba(255, 105, 125, .36);
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(238, 48, 77, .12);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}

/* ============================================================
   7. PANEL / SEARCH / PROFILE POLISH
   ============================================================ */

body.kzg-dashboard-v4 .kzg-v4-dashboard-search {
    border-color: rgba(76, 109, 170, .48) !important;
    background: linear-gradient(180deg, rgba(7, 18, 35, .94), rgba(5, 14, 29, .95)) !important;
}

body.kzg-dashboard-v4 .kzg-v4-dashboard-search:focus-within {
    border-color: rgba(73, 142, 239, .68) !important;
    box-shadow: 0 0 0 2px rgba(48, 115, 218, .08), 0 8px 25px rgba(0,0,0,.18) !important;
}

.kzg-v4-sidebar .profile-info {
    min-height: 66px !important;
    border-color: rgba(75, 98, 153, .33) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.15) !important;
}

.kzg-modern-server-section .card,
.kzg-modern-recent .card {
    border-color: rgba(69, 91, 143, .30) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.012) !important;
}

.kzg-modern-server-section .card:hover,
.kzg-modern-recent .card:hover {
    border-color: rgba(78, 103, 164, .38) !important;
}

/* ============================================================
   8. TRUE DESKTOP COLLAPSED ICON RAIL
   ============================================================ */

@media (min-width: 992px) {
    body.kzg-v43-sidebar-collapsed .sidebar-wrapper.kzg-v4-sidebar {
        left: 0 !important;
        width: var(--k43-rail) !important;
        min-width: var(--k43-rail) !important;
        max-width: var(--k43-rail) !important;
        transform: none !important;
        overflow: hidden !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar #sidebar {
        width: var(--k43-rail) !important;
        min-width: var(--k43-rail) !important;
        overflow: hidden !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar #sidebar::before,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar #sidebar::after,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar-poster {
        display: none !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .theme-brand {
        position: relative;
        min-height: 72px !important;
        padding: 9px 6px !important;
        justify-content: center !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .nav-logo {
        width: 100% !important;
        justify-content: center !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .theme-logo img {
        width: 44px !important;
        height: 44px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .theme-text,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .profile-content,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .kzg-v4-menu-count,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .kzg-v4-menu-chevron,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .kzg-v43-external,
    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .submenu {
        display: none !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .sidebar-toggle {
        position: absolute !important;
        top: 29px;
        right: 2px;
        z-index: 9;
        display: block !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .sidebar-toggle svg {
        width: 14px !important;
        height: 14px !important;
        transform: rotate(180deg);
        color: #73819b !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .profile-info {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 58px !important;
        min-height: 58px !important;
        margin: 10px auto 9px !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .profile-info .user-info {
        justify-content: center !important;
        width: 100% !important;
        background: transparent !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .profile-info .profile-img {
        margin: 0 !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .profile-info .profile-img img {
        width: 38px !important;
        height: 38px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar-search {
        justify-content: center;
        width: 46px !important;
        height: 38px !important;
        margin: 0 auto 12px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar-search input {
        display: none !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar-search i {
        margin: 0 !important;
        font-size: 14px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .menu-categories {
        width: 100% !important;
        padding: 0 12px 24px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .menu-categories > li.menu {
        width: 58px !important;
        margin: 4px 0 !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 9px !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle > div {
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle span {
        display: none !important;
    }

    body.kzg-v43-sidebar-collapsed .kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle i:first-child {
        width: auto !important;
        margin: 0 !important;
        font-size: 17px !important;
    }

    body.kzg-v43-sidebar-collapsed #content {
        width: calc(100% - var(--k43-rail)) !important;
        max-width: calc(100% - var(--k43-rail)) !important;
        margin-left: var(--k43-rail) !important;
    }

    body.kzg-v43-sidebar-collapsed .header-container {
        left: var(--k43-rail) !important;
        width: calc(100% - var(--k43-rail)) !important;
        max-width: calc(100% - var(--k43-rail)) !important;
        margin-left: 0 !important;
    }

    body.kzg-v43-sidebar-collapsed .layout-px-spacing {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ============================================================
   9. RESPONSIVE — KEEP THE BANNER LOUD, CARDS USEFUL
   ============================================================ */

@media (max-width: 1500px) {
    body.kzg-dashboard-v4 .kzg-modern-stats {
        width: 66% !important;
    }

    .kzg-v43-map-thumb {
        width: 46px;
        height: 28px;
        margin-right: 7px;
    }

    .kzg-v43-map-thumb img {
        width: 46px !important;
        height: 28px !important;
    }
}

@media (max-width: 1200px) {
    body.kzg-dashboard-v4 .kzg-modern-stats {
        width: 72% !important;
    }

    body.kzg-dashboard-v4 .kzg-modern-stats .card h1 {
        font-size: 18px !important;
    }
}

@media (max-width: 991.98px) {
    body.kzg-dashboard-v4 .kzg-modern-stats {
        width: 100% !important;
        max-width: none !important;
        flex-wrap: wrap !important;
    }

    body.kzg-dashboard-v4 .kzg-modern-stats > [class*="col-"] {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 180px !important;
    }

    .kzg-v43-map-thumb {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kzg-v43-discord-nav .nav-link,
    .kzg-v43-map-thumb img,
    .kzg-v4-sidebar #kzgV4ToolsSection li > a {
        transition: none !important;
    }
}

/* ============================================================
   10. SIDEBAR ART — ATMOSPHERE, NOT A SECOND HERO
   ============================================================ */

.kzg-v4-sidebar #sidebar::before {
    opacity: .53 !important;
    filter: brightness(.58) saturate(.72) contrast(1.04) !important;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,.04) 8%,
        rgba(0,0,0,.20) 18%,
        rgba(0,0,0,.58) 34%,
        #000 51%,
        #000 88%,
        rgba(0,0,0,.78) 100%) !important;
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,.04) 8%,
        rgba(0,0,0,.20) 18%,
        rgba(0,0,0,.58) 34%,
        #000 51%,
        #000 88%,
        rgba(0,0,0,.78) 100%) !important;
}

.kzg-v4-sidebar #sidebar::after {
    background:
        linear-gradient(180deg,
            rgba(4, 10, 23, 0) 0%,
            rgba(4, 10, 23, .13) 16%,
            rgba(5, 11, 25, .32) 40%,
            rgba(5, 10, 22, .48) 68%,
            rgba(7, 6, 18, .61) 100%),
        radial-gradient(circle at 12% 82%, rgba(203, 29, 55, .055), transparent 30%) !important;
}