/*
 * KZG V4.2 — ELITE REFINEMENT LAYER
 * Loaded after V4 Premium + V4.1 Refinement.
 * Scope: presentation only. No controller/database/server API changes.
 */

:root {
    --k42-bg: #050914;
    --k42-panel: #081426;
    --k42-panel-2: #0a182c;
    --k42-line: rgba(77, 96, 151, .28);
    --k42-line-hi: rgba(98, 112, 176, .43);
    --k42-text: #f4f7fc;
    --k42-muted: #94a3bb;
    --k42-blue: #27adff;
    --k42-red: #ff405f;
    --k42-green: #10d486;
    --k42-purple: #885cff;
}

/* ============================================================
   1. SIDEBAR — LARGER BRAND, DARKER ART, TRUE FADE-IN
   ============================================================ */

.kzg-v4-sidebar .theme-brand {
    min-height: 70px !important;
    padding: 8px 13px !important;
    background: linear-gradient(180deg, rgba(5, 10, 22, .83), rgba(5, 10, 22, .66)) !important;
}

.kzg-v4-sidebar .theme-logo img {
    width: 47px !important;
    height: 47px !important;
    filter:
        drop-shadow(0 0 10px rgba(230, 45, 68, .16))
        drop-shadow(0 4px 10px rgba(0, 0, 0, .28)) !important;
}

.kzg-v4-sidebar .theme-text .nav-link {
    font-size: 23px !important;
    font-weight: 850 !important;
    letter-spacing: .012em !important;
}

/* Darken the production sidebar artwork while preserving the different figures
   already present in the artwork. The mask removes the hard horizontal start. */
.kzg-v4-sidebar #sidebar::before {
    height: 54% !important;
    background:
        linear-gradient(180deg,
            rgba(5, 10, 22, .05) 0%,
            rgba(5, 10, 22, .18) 18%,
            rgba(6, 8, 18, .32) 50%,
            rgba(6, 5, 14, .46) 100%),
        url("./kzg-v4/kzg-sidebar-background-art.webp") center bottom / 100% auto no-repeat !important;
    opacity: .62 !important;
    filter: brightness(.66) saturate(.82) contrast(1.05) !important;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,.08) 7%,
        rgba(0,0,0,.42) 18%,
        #000 36%,
        #000 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,.08) 7%,
        rgba(0,0,0,.42) 18%,
        #000 36%,
        #000 100%);
}

.kzg-v4-sidebar #sidebar::after {
    height: 58% !important;
    background:
        linear-gradient(180deg,
            rgba(5, 10, 22, 0) 0%,
            rgba(5, 10, 22, .10) 15%,
            rgba(5, 10, 22, .31) 41%,
            rgba(6, 7, 17, .42) 67%,
            rgba(8, 4, 12, .54) 100%),
        radial-gradient(circle at 14% 80%, rgba(218, 28, 52, .08), transparent 31%) !important;
}

.kzg-v4-sidebar .profile-info {
    border-color: rgba(86, 103, 164, .30) !important;
    background: linear-gradient(145deg, rgba(6, 14, 28, .88), rgba(4, 9, 21, .90)) !important;
}

.kzg-v4-sidebar .menu-categories li.menu.active > .dropdown-toggle {
    background: linear-gradient(102deg, #6250ef 0%, #5369f4 60%, #4e70ef 100%) !important;
    box-shadow:
        0 8px 20px rgba(71, 58, 206, .24),
        inset 0 1px rgba(255,255,255,.10) !important;
}

/* Slogan stays absent. */
.kzg-v4-sidebar-brand-line {
    display: none !important;
}

/* ============================================================
   2. HERO — CLEAN ART, SEARCH PERFECTLY ALIGNED
   ============================================================ */

/* Remove both KZG COMMUNITY and PLAY • COMPETE • RESPECT from the live hero. */
.kzg-v4-community-brand {
    display: none !important;
}

.kzg-modern-hero {
    min-height: 74px !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
}

.kzg-v4-heading {
    min-height: 62px !important;
}

.kzg-v4-dashboard-search {
    top: 50% !important;
    right: 304px !important;
    transform: translateY(-50%) !important;
    width: 322px !important;
    height: 37px !important;
    padding: 0 9px 0 12px !important;
    background: linear-gradient(180deg, rgba(6, 16, 32, .90), rgba(5, 13, 28, .90)) !important;
    border-color: rgba(80, 102, 162, .42) !important;
    box-shadow:
        0 8px 24px rgba(0,0,0,.16),
        inset 0 1px rgba(255,255,255,.018) !important;
}

.kzg-v4-dashboard-search input {
    font-size: 10.4px !important;
    line-height: 1 !important;
}

.kzg-v4-dashboard-search > i {
    opacity: .83;
}

.kzg-v41-keyhint {
    padding: 2px 6px !important;
    font-size: 7px !important;
    opacity: .78;
}

.kzg-v4-welcome-avatar {
    width: 52px !important;
    height: 52px !important;
    margin-right: 12px !important;
}

.kzg-v4-welcome-avatar img {
    width: 36px !important;
    height: 36px !important;
}

.kzg-v4-welcome-copy h1 {
    font-size: 24px !important;
}

.kzg-v4-welcome-copy p {
    margin-top: 3px !important;
    font-size: 10.7px !important;
}

/* ============================================================
   3. STATS — THREE COMPACT HUD TILES, NO ADMIN CARD
   ============================================================ */

.kzg-modern-overview {
    min-height: 92px !important;
}

.kzg-modern-stats {
    width: 49% !important;
    max-width: 820px !important;
    gap: 9px !important;
    padding: 0 8px 1px !important;
}

/* CSS fallback: JS also removes the Total Admins tile from the DOM. */
.kzg-modern-stats > [class*="col-"]:nth-child(4) {
    display: none !important;
}

.kzg-modern-stats > [class*="col-"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.kzg-modern-stats .card {
    --k42-accent: 80, 105, 255;
    height: 79px !important;
    min-height: 79px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(var(--k42-accent), .46) !important;
    background:
        radial-gradient(circle at 12% 50%, rgba(var(--k42-accent), .11), transparent 31%),
        linear-gradient(145deg, rgba(8, 20, 39, .965), rgba(6, 13, 28, .985)) !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,.22),
        inset 0 1px rgba(255,255,255,.025) !important;
    isolation: isolate;
}

.kzg-modern-stats .card::before {
    opacity: 0 !important;
}

.kzg-modern-stats .card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(90deg,
            rgba(var(--k42-accent), .82),
            rgba(var(--k42-accent), .17) 26%,
            transparent 58%) top left / 100% 1px no-repeat,
        linear-gradient(135deg, transparent 73%, rgba(var(--k42-accent), .055));
    opacity: .84;
}

.kzg-modern-stats .col-xl-3:nth-child(1) .card { --k42-accent: 29, 166, 244; }
.kzg-modern-stats .col-xl-3:nth-child(2) .card { --k42-accent: 235, 51, 82; }
.kzg-modern-stats .col-xl-3:nth-child(3) .card { --k42-accent: 12, 199, 119; }

.kzg-modern-stats .card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(var(--k42-accent), .66) !important;
    box-shadow:
        0 11px 25px rgba(0,0,0,.25),
        0 0 15px rgba(var(--k42-accent), .055),
        inset 0 1px rgba(255,255,255,.03) !important;
}

.kzg-modern-stats .card-body {
    position: relative;
    z-index: 2;
    padding: 9px 10px !important;
}

.kzg-modern-stats .fa-3x {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    box-shadow: 0 0 18px rgba(var(--k42-accent), .16) !important;
}

.kzg-modern-stats .text-end {
    margin-left: 11px !important;
}

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

.kzg-modern-stats p {
    margin-top: 2px !important;
    font-size: 9.2px !important;
    color: #b6c2d6 !important;
}

.kzg-v4-stat-subline {
    margin-top: 4px !important;
    font-size: 7.6px !important;
    white-space: nowrap;
}

.kzg-modern-stats .dash-active-stat {
    left: 63px !important;
    bottom: 7px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-size: 7.2px !important;
    line-height: 1.05 !important;
}

/* ============================================================
   4. PANELS / TABLES — LESS BOXY, MORE PURPOSE-BUILT
   ============================================================ */

.kzg-modern-server-section > .card,
.kzg-modern-recent .card,
.kzg-modern-dashboard .chart-section .card {
    border-color: rgba(74, 95, 153, .31) !important;
    border-radius: 9px !important;
    background:
        linear-gradient(180deg, rgba(8, 19, 37, .96), rgba(6, 15, 31, .985)) !important;
    box-shadow:
        0 13px 32px rgba(0,0,0,.22),
        inset 0 1px rgba(255,255,255,.018) !important;
}

.kzg-v4-panel-header {
    min-height: 48px !important;
    padding: 9px 11px !important;
    background: linear-gradient(180deg, rgba(11, 23, 44, .92), rgba(8, 18, 35, .88)) !important;
    border-bottom-color: rgba(70, 91, 145, .22) !important;
}

.kzg-v4-panel-title h5 {
    font-size: 13px !important;
    letter-spacing: -.005em !important;
}

.kzg-v4-panel-title small {
    color: #7f8ea8 !important;
    font-size: 8.2px !important;
}

.kzg-v4-view-all {
    min-height: 29px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
    background: rgba(42, 50, 119, .45) !important;
    border-color: rgba(93, 84, 222, .48) !important;
}

.kzg-modern-server-section .table thead th,
.kzg-modern-recent .table thead th {
    background: linear-gradient(180deg, #172943, #14243c) !important;
}

.kzg-modern-server-section .table tbody tr,
.kzg-modern-recent .table tbody tr {
    background: transparent !important;
}

.kzg-modern-server-section .table tbody tr:nth-child(even),
.kzg-modern-recent .table tbody tr:nth-child(even) {
    background: rgba(13, 26, 48, .20) !important;
}

.kzg-modern-server-section .table tbody tr:hover,
.kzg-modern-recent .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(36, 54, 86, .42), rgba(25, 40, 67, .24)) !important;
    box-shadow: inset 2px 0 rgba(103, 86, 239, .55) !important;
}

.kzg-modern-server-section .btn {
    min-width: 62px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 8.4px !important;
}

.kzg-v4-status {
    min-width: 52px !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
}

.kzg-v41-refresh {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
}

.kzg-v41-live {
    font-size: 8px !important;
    letter-spacing: .015em !important;
}

/* ============================================================
   5. BANS / MUTES / ADMIN / FORMS — SAME PRODUCT LANGUAGE
   ============================================================ */

.middle-content > .card,
.middle-content > .row > [class*="col-"] > .card {
    border-color: rgba(77, 96, 151, .30) !important;
    box-shadow:
        0 14px 34px rgba(0,0,0,.21),
        inset 0 1px rgba(255,255,255,.016) !important;
}

.table thead th,
table.dataTable thead th {
    color: #aebbd0 !important;
    background: linear-gradient(180deg, #192d49, #162741) !important;
    border-bottom-color: rgba(82, 102, 160, .24) !important;
}

.table tbody td,
table.dataTable tbody td {
    border-color: rgba(66, 82, 123, .095) !important;
}

.form-control,
.form-select,
select,
textarea,
input[type="search"],
.dataTables_wrapper input,
.dataTables_wrapper select,
.dt-container input,
.dt-container select {
    background: linear-gradient(180deg, #0c192d, #0a1629) !important;
    border-color: rgba(81, 101, 159, .43) !important;
    border-radius: 7px !important;
}

.form-control:hover,
.form-select:hover,
textarea:hover {
    border-color: rgba(93, 112, 176, .55) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="search"]:focus {
    border-color: rgba(103, 84, 231, .72) !important;
    box-shadow:
        0 0 0 3px rgba(96, 74, 222, .085),
        0 8px 20px rgba(0,0,0,.10) !important;
}

label,
.form-label {
    color: #9caac1 !important;
}

.btn-primary {
    background: linear-gradient(105deg, #6748ee, #5869f5) !important;
    border-color: rgba(112, 91, 240, .72) !important;
}

.btn-success {
    background: linear-gradient(105deg, #0ab978, #0fc889) !important;
    border-color: rgba(31, 202, 139, .65) !important;
}

/* ============================================================
   6. CHARTS / FOOTER — QUIETER SUPPORTING CONTENT
   ============================================================ */

.kzg-modern-dashboard .chart-section .card {
    min-height: 270px !important;
}

.kzg-modern-dashboard .chart-section .card-header {
    min-height: 44px !important;
}

.kzg-modern-dashboard .chart-section .card-header h5 {
    font-size: 13px !important;
}

.footer-wrapper {
    margin-top: 8px !important;
    padding-top: 13px !important;
    border-top: 1px solid rgba(62, 78, 122, .12);
    color: #5f6d84 !important;
}

/* ============================================================
   7. RESPONSIVE — KEEP COMPACT CARDS WITHOUT CRAMPING DATA
   ============================================================ */

@media (max-width: 1600px) {
    .kzg-modern-stats {
        width: 54% !important;
        max-width: 790px !important;
    }

    .kzg-v4-dashboard-search {
        right: 272px !important;
        width: 300px !important;
    }
}

@media (max-width: 1366px) {
    .kzg-modern-stats {
        width: 62% !important;
        max-width: none !important;
    }

    .kzg-v4-dashboard-search {
        right: 225px !important;
        width: 280px !important;
    }
}

@media (max-width: 1180px) {
    .kzg-modern-stats {
        width: 100% !important;
    }

    .kzg-v4-dashboard-search {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: min(100%, 360px) !important;
        margin-left: auto !important;
    }
}

@media (max-width: 760px) {
    .kzg-modern-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .kzg-modern-stats .card {
        height: 74px !important;
        min-height: 74px !important;
    }

    .kzg-v4-sidebar .theme-logo img {
        width: 43px !important;
        height: 43px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kzg-modern-stats .card,
    .kzg-modern-server-section .table tbody tr,
    .kzg-modern-recent .table tbody tr {
        transition: none !important;
    }
}