/*
 * ============================================================
 * KZG MODERN
 * CSS-BANS 6.4.x visual layer
 * ============================================================
 *
 * This file intentionally sits ABOVE the original CSS-BANS
 * theme. It does not replace the existing theme.css.
 */

:root {
    --kzg-bg: #080b16;
    --kzg-bg-deep: #050711;
    --kzg-panel: rgba(17, 21, 39, .92);
    --kzg-panel-2: rgba(22, 26, 48, .92);
    --kzg-panel-hover: rgba(27, 32, 58, .96);

    --kzg-border: rgba(121, 93, 221, .22);
    --kzg-border-strong: rgba(131, 97, 238, .46);

    --kzg-purple: #7867ef;
    --kzg-purple-2: #9a61f2;
    --kzg-blue: #5878ee;
    --kzg-cyan: #50bde9;
    --kzg-red: #e75460;
    --kzg-green: #39c994;
    --kzg-yellow: #e4b854;

    --kzg-text: #edf0fb;
    --kzg-muted: #9099b5;

    --kzg-radius: 13px;
    --kzg-shadow:
        0 12px 34px rgba(0,0,0,.28),
        0 0 0 1px rgba(121,93,221,.04);

    --kzg-glow:
        0 0 28px rgba(121, 91, 235, .13);
}


/* ============================================================
   GLOBAL APPLICATION SHELL
   ============================================================ */

body {
    background:
        radial-gradient(circle at 77% 0%,
            rgba(92, 68, 190, .10),
            transparent 30%),
        radial-gradient(circle at 35% 80%,
            rgba(44, 77, 151, .06),
            transparent 34%),
        var(--kzg-bg) !important;

    color: var(--kzg-text);
}

#content,
.main-container,
.layout-px-spacing,
.middle-content {
    background: transparent !important;
}

.layout-px-spacing {
    padding-left: 24px !important;
    padding-right: 24px !important;
}


/* ============================================================
   TOP NAVBAR
   ============================================================ */

.header-container {
    border-bottom: 1px solid rgba(122, 93, 217, .13) !important;
    background: rgba(8, 11, 22, .88) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-container .header {
    background: transparent !important;
    min-height: 66px;
}

.header-container .nav-link,
.header-container .sidebarCollapse {
    transition:
        color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.header-container .nav-link:hover,
.header-container .sidebarCollapse:hover {
    color: #fff !important;
    transform: translateY(-1px);
}

.header-container #language-dropdown {
    background-color: rgba(21, 25, 45, .85) !important;
    border: 1px solid rgba(123, 101, 198, .22) !important;
    border-radius: 9px !important;
}

.user-profile-dropdown .avatar img {
    box-shadow:
        0 0 0 2px rgba(87, 121, 239, .76),
        0 0 18px rgba(91, 104, 234, .25);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar-wrapper {
    background:
        radial-gradient(circle at 42% 10%,
            rgba(96, 74, 209, .12),
            transparent 24%),
        linear-gradient(180deg, #0c1021 0%, #080b16 100%) !important;

    border-right: 1px solid rgba(121, 93, 221, .16) !important;
}

.sidebar-wrapper #sidebar {
    background: transparent !important;
}

.sidebar-wrapper .theme-brand {
    min-height: 84px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.sidebar-wrapper .theme-brand .theme-logo img,
.sidebar-wrapper .navbar-logo {
    filter: drop-shadow(0 0 11px rgba(223, 54, 74, .20));
}

.sidebar-wrapper .profile-info {
    margin: 11px 13px 18px !important;
    padding: 15px !important;

    border: 1px solid rgba(116, 91, 204, .25);
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(32, 36, 65, .80),
            rgba(19, 22, 42, .82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 8px 25px rgba(0,0,0,.17);
}

.sidebar-wrapper .profile-info .profile-img img {
    box-shadow:
        0 0 0 2px rgba(110, 87, 224, .60),
        0 0 16px rgba(105, 81, 222, .24);
}

.sidebar-wrapper .menu-categories > li.menu {
    margin: 3px 10px;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle {
    border-radius: 8px !important;

    transition:
        background .14s ease,
        color .14s ease,
        transform .14s ease,
        box-shadow .14s ease;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle:hover {
    background: rgba(113, 91, 205, .10) !important;
    color: #e8eaff !important;
    transform: translateX(2px);
}

.sidebar-wrapper .menu-categories li.menu.active > .dropdown-toggle,
.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle[aria-expanded="true"] {
    color: #fff !important;

    background:
        linear-gradient(
            115deg,
            rgba(73, 94, 230, .94),
            rgba(125, 72, 223, .94)
        ) !important;

    box-shadow:
        0 7px 19px rgba(70, 65, 190, .20);
}

.sidebar-wrapper .submenu li a {
    border-radius: 7px !important;
    margin-top: 2px;
    margin-bottom: 2px;

    transition:
        background .13s ease,
        color .13s ease,
        transform .13s ease;
}

.sidebar-wrapper .submenu li a:hover {
    background: rgba(105, 88, 190, .10) !important;
    transform: translateX(2px);
}

.sidebar-wrapper .submenu li.active > a {
    background: rgba(115, 86, 225, .15) !important;
    color: #d9d3ff !important;
}

.sidebar-wrapper svg,
.sidebar-wrapper i {
    opacity: .90;
}


/* ============================================================
   GLOBAL CARDS / PANELS
   ============================================================ */

.card,
.widget,
.widget-content,
.note,
.modal-content {
    background:
        linear-gradient(
            145deg,
            rgba(22, 26, 47, .95),
            rgba(14, 18, 34, .94)
        ) !important;

    border: 1px solid var(--kzg-border) !important;
    border-radius: var(--kzg-radius) !important;

    box-shadow: var(--kzg-shadow);
}

.card {
    overflow: hidden;
}

.card-header {
    background: rgba(17, 21, 39, .54) !important;

    border-bottom:
        1px solid rgba(126, 98, 221, .18) !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
}

.card-header h4,
.card-header h5,
.card-header h6 {
    color: #e8eaf7 !important;
    letter-spacing: .015em;
}

.card-body {
    position: relative;
}

.card,
.widget-content {
    transition:
        border-color .17s ease,
        transform .17s ease,
        box-shadow .17s ease;
}

.card:hover {
    border-color: rgba(127, 97, 224, .36) !important;

    box-shadow:
        0 15px 38px rgba(0,0,0,.31),
        0 0 25px rgba(94, 74, 206, .055);
}


/* ============================================================
   DASHBOARD HERO
   ============================================================ */

.kzg-modern-hero {
    position: relative;
    min-height: 235px;

    margin: 7px 0 24px;
    padding: 34px 38px;

    overflow: hidden;

    border:
        1px solid rgba(124, 90, 224, .32);

    border-radius: 16px;

    background:
        radial-gradient(circle at 83% 42%,
            rgba(111, 73, 226, .33),
            transparent 24%),

        radial-gradient(circle at 70% 105%,
            rgba(43, 86, 176, .21),
            transparent 38%),

        linear-gradient(
            115deg,
            rgba(17, 22, 43, .98) 0%,
            rgba(20, 21, 46, .96) 45%,
            rgba(33, 22, 65, .93) 100%
        );

    box-shadow:
        0 20px 48px rgba(0,0,0,.31),
        0 0 45px rgba(98,73,211,.10);
}

.kzg-modern-hero::before {
    content: "";
    position: absolute;

    width: 430px;
    height: 430px;

    right: -88px;
    top: -165px;

    border-radius: 50%;

    border:
        1px solid rgba(166, 109, 255, .14);

    box-shadow:
        0 0 0 52px rgba(117, 86, 229, .035),
        0 0 0 103px rgba(117, 86, 229, .023),
        0 0 100px rgba(119, 83, 232, .10);

    transform: rotate(-18deg);
}

.kzg-modern-hero::after {
    content: "";
    position: absolute;

    width: 430px;
    height: 165px;

    right: 25px;
    bottom: -91px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(122, 92, 221, .09) 0,
            rgba(122, 92, 221, .09) 1px,
            transparent 1px,
            transparent 22px
        );

    opacity: .37;
    transform:
        perspective(300px)
        rotateX(63deg);

    transform-origin: center bottom;
}

.kzg-modern-hero-content {
    position: relative;
    z-index: 3;

    max-width: 680px;
}

.kzg-modern-eyebrow {
    margin-bottom: 9px;

    color: #a393f5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.kzg-modern-hero h1 {
    color: #fff !important;

    margin-bottom: 9px;

    font-size: clamp(27px, 2.55vw, 43px);
    font-weight: 800;
    letter-spacing: -.028em;
}

.kzg-modern-hero p {
    max-width: 580px;

    margin-bottom: 21px;

    color: #9ea8c5 !important;

    font-size: 14px;
    line-height: 1.65;
}

.kzg-modern-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.kzg-modern-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    color: #d7dcf4;

    border:
        1px solid rgba(127, 100, 214, .27);

    border-radius: 999px;

    background:
        rgba(8, 12, 27, .48);

    backdrop-filter: blur(6px);

    font-size: 11px;
    font-weight: 700;
}

.kzg-modern-chip i {
    color: #8475ef;
}

.kzg-modern-hero-logo {
    position: absolute;
    z-index: 2;

    right: 49px;
    top: 50%;

    width: clamp(118px, 11vw, 180px);
    max-height: 178px;

    object-fit: contain;

    opacity: .81;

    filter:
        drop-shadow(0 0 16px rgba(222, 50, 73, .14))
        drop-shadow(0 0 47px rgba(120, 70, 224, .20));

    transform:
        translateY(-50%)
        rotate(-3deg);
}


/* ============================================================
   DASHBOARD STAT CARDS
   ============================================================ */

.kzg-modern-dashboard > section:first-of-type + .row,
.kzg-modern-stats {
    margin-top: 0;
}

.kzg-modern-dashboard .row > .col-xl-3 > .card {
    min-height: 142px;
}

.kzg-modern-dashboard .row > .col-xl-3 > .card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--kzg-blue),
            var(--kzg-purple)
        );

    opacity: .75;
}

.kzg-modern-dashboard .row > .col-xl-3:nth-child(2) > .card::before {
    background:
        linear-gradient(
            180deg,
            #e35865,
            #9b4ce4
        );
}

.kzg-modern-dashboard .row > .col-xl-3:nth-child(3) > .card::before {
    background:
        linear-gradient(
            180deg,
            #e1ad4b,
            #8769ee
        );
}

.kzg-modern-dashboard .row > .col-xl-3:nth-child(4) > .card::before {
    background:
        linear-gradient(
            180deg,
            #5a85ee,
            #53bfcc
        );
}

.kzg-modern-dashboard .col-xl-3 .card h1 {
    color: #f5f6ff !important;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.035em;
}

.kzg-modern-dashboard .col-xl-3 .card p {
    color: var(--kzg-muted) !important;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.kzg-modern-dashboard .col-xl-3 .fa-3x {
    font-size: 2rem !important;

    padding: 13px;

    border-radius: 11px;

    background: rgba(94, 82, 193, .10);
}

.dash-active-stat {
    position: absolute !important;

    right: 8px;
    top: 10px;

    margin: 0 !important;

    border-radius: 999px !important;
}


/* ============================================================
   TABLES / DATATABLES
   ============================================================ */

.table-responsive {
    border-radius: 9px;
}

.table,
table.dataTable {
    color: #d8dced !important;
}

.table thead th,
table.dataTable thead th {
    color: #9ba5c1 !important;

    background:
        rgba(12, 16, 31, .76) !important;

    border-bottom:
        1px solid rgba(126, 98, 215, .20) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.table tbody tr,
table.dataTable tbody tr {
    background: transparent !important;

    border-bottom:
        1px solid rgba(113, 101, 164, .08) !important;

    transition:
        background .12s ease,
        box-shadow .12s ease;
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
    background:
        rgba(79, 91, 151, .10) !important;

    box-shadow:
        inset 3px 0 0 rgba(117, 89, 224, .50);
}

.table td,
.table th {
    vertical-align: middle;
}

table.dataTable tbody tr.selected,
.table tbody tr.selected {
    background:
        rgba(71, 95, 164, .18) !important;

    box-shadow:
        inset 3px 0 0 rgba(123, 92, 235, .78);
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
select {
    color: #dbe0f4 !important;

    background-color:
        rgba(13, 17, 32, .82) !important;

    border:
        1px solid rgba(120, 102, 184, .28) !important;

    border-radius: 8px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color:
        rgba(126, 91, 228, .74) !important;

    box-shadow:
        0 0 0 3px
        rgba(116, 84, 222, .12) !important;
}


/* ============================================================
   BUTTONS / PAGINATION
   ============================================================ */

.btn {
    border-radius: 8px !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.15);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

.btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 17px rgba(0,0,0,.22);
}

.btn-primary {
    border-color:
        rgba(125, 88, 228, .70) !important;

    background:
        linear-gradient(
            135deg,
            #546ee7,
            #7e51da
        ) !important;
}

.page-link {
    color: #b5bcda !important;

    background:
        rgba(17, 21, 39, .87) !important;

    border-color:
        rgba(117, 101, 178, .20) !important;
}

.page-item.active .page-link {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #526ee6,
            #7f52de
        ) !important;

    border-color:
        rgba(133, 96, 231, .78) !important;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge {
    border-radius: 999px;
    font-weight: 800;
}

.badge-light-danger {
    background:
        rgba(216, 70, 84, .15) !important;
}

.badge-light-warning {
    background:
        rgba(220, 170, 70, .15) !important;
}

.badge-light-success,
.badge-success {
    background:
        rgba(52, 195, 143, .15) !important;
}


/* ============================================================
   DASHBOARD SERVER / RECENT / CHART PANELS
   ============================================================ */

.kzg-modern-dashboard .chart-section {
    padding: 0 !important;

    background: transparent !important;
}

.kzg-modern-dashboard .interval-container {
    width: min(330px, 100%);

    margin-left: auto;
    margin-bottom: 12px;

    padding: 0 !important;
}

.kzg-modern-dashboard .interval-container label {
    display: block;

    margin-bottom: 7px;

    color: #939db9;
    font-size: 11px;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.kzg-modern-dashboard #serverList td {
    padding-top: 13px;
    padding-bottom: 13px;
}

.kzg-modern-dashboard .recent-stats .card {
    min-height: 330px;
}


/* ============================================================
   APEXCHARTS
   ============================================================ */

.apexcharts-canvas text {
    fill: #8e98b5 !important;
}

.apexcharts-gridline {
    stroke:
        rgba(119, 100, 176, .08) !important;
}

.apexcharts-tooltip,
.apexcharts-xaxistooltip {
    background:
        rgba(9, 12, 25, .97) !important;

    border:
        1px solid rgba(126, 97, 220, .28) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.34) !important;
}


/* ============================================================
   ALERTS / NOTES
   ============================================================ */

.alert,
.note {
    border-radius: 10px !important;
}

.note-primary {
    border-left:
        3px solid var(--kzg-purple) !important;
}


/* ============================================================
   MODAL / DROPDOWNS
   ============================================================ */

.modal-content,
.dropdown-menu {
    background:
        rgba(14, 18, 34, .98) !important;

    border:
        1px solid rgba(122, 94, 215, .28) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.43) !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer-wrapper {
    color: #676f89 !important;

    opacity: .86;

    border-top:
        1px solid rgba(112, 92, 175, .08);

    padding-top: 19px;
}


/* ============================================================
   KZG DETAILING
   ============================================================ */

a:not(.btn):hover {
    color: #d5ceff;
}

.text-primary {
    color: #766be9 !important;
}

.text-info {
    color: #5aaae8 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

    .layout-px-spacing {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .kzg-modern-hero {
        min-height: auto;

        padding:
            27px 23px 28px;
    }

    .kzg-modern-hero-content {
        max-width: 72%;
    }

    .kzg-modern-hero-logo {
        right: 23px;
        width: 105px;
    }
}

@media (max-width: 650px) {

    .kzg-modern-hero {
        padding:
            25px 19px;
    }

    .kzg-modern-hero-content {
        max-width: 100%;
    }

    .kzg-modern-hero-logo {
        position: relative;

        display: block;

        right: auto;
        top: auto;

        width: 90px;

        margin:
            19px auto 0;

        transform: none;

        opacity: .72;
    }

    .kzg-modern-hero::before {
        right: -250px;
    }

    .kzg-modern-hero h1 {
        font-size: 27px;
    }

    .kzg-modern-dashboard .recent-stats .card {
        min-height: 0;
    }
}

/*
 * ============================================================
 * KZG MODERN V2.1 LIVE
 * ============================================================
 */

.middle-content,
.middle-content.container-xxl {
    width: 100% !important;
    max-width: none !important;
}

.layout-px-spacing {
    width: 100% !important;
    max-width: none !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.kzg-modern-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(360px, .72fr);
    column-gap: 16px;
    row-gap: 16px;
    width: 100%;
    max-width: 1740px;
    margin: 0 auto 30px;
}

.kzg-modern-hero,
.kzg-modern-overview,
.kzg-modern-top-players,
.kzg-modern-dashboard .chart-section {
    grid-column: 1 / -1;
}

.kzg-modern-hero {
    grid-row: 1;
}

.kzg-modern-overview {
    grid-row: 2;
}

.kzg-modern-top-players {
    grid-row: 3;
}

.kzg-modern-server-section {
    grid-column: 1;
    grid-row: 4;
    margin-bottom: 0 !important;
}

.kzg-modern-recent {
    grid-column: 2;
    grid-row: 4;
    margin-bottom: 0 !important;
}

.kzg-modern-dashboard .chart-section {
    grid-row: 5;
}

.kzg-modern-hero {
    min-height: 250px;
    margin: 4px 0 0;
    padding: 35px 40px;
    isolation: isolate;

    background:
        linear-gradient(
            90deg,
            rgba(10,15,32,.995) 0%,
            rgba(13,18,40,.98) 39%,
            rgba(20,21,54,.91) 67%,
            rgba(31,19,68,.85) 100%
        ) !important;

    border: 1px solid rgba(126,93,231,.38) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.31),
        0 0 42px rgba(101,70,218,.08);
}

.kzg-modern-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    border-radius: 0 16px 16px 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(7,10,25,.10) 30%,
            rgba(6,8,20,.22) 100%
        ),
        url("/theme/kzg-modern-operator.svg")
        right 5% center / auto 115%
        no-repeat;

    opacity: .91;
}

.kzg-modern-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0 0 0 auto;
    width: 54%;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(119,75,235,.21),
            transparent 43%
        );
}

.kzg-modern-hero-content {
    max-width: 650px;
}

.kzg-modern-hero h1 {
    font-size: clamp(31px, 2.2vw, 43px);
}

.kzg-modern-hero-logo {
    display: none !important;
}

.kzg-modern-overview > .note.note-primary {
    margin-bottom: 12px !important;
    padding: 10px 14px !important;
    min-height: 0 !important;
    background: rgba(15,19,37,.76) !important;
    border: 1px solid rgba(103,91,188,.19) !important;
    border-left: 3px solid #7163e7 !important;
    box-shadow: none !important;
    font-size: 11px;
    color: #969fbd !important;
}

.kzg-modern-overview > .note.note-primary h1 {
    font-size: 15px !important;
}

.kzg-modern-overview > .note.note-primary ul {
    display: none !important;
}

.kzg-modern-stats {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

.kzg-modern-stats > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 0 !important;
}

.kzg-modern-stats .card {
    position: relative;
    height: 112px !important;
    min-height: 112px !important;
    overflow: hidden;
}

.kzg-modern-stats .card-body {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 18px !important;
}

.kzg-modern-stats .card-body > .d-flex {
    width: 100%;
}

.kzg-modern-stats .fa-3x {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    font-size: 21px !important;
    border-radius: 11px !important;
}

.kzg-modern-stats h1 {
    margin: 0 0 4px !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

.kzg-modern-stats p {
    margin: 0 !important;
    font-size: 9px !important;
    letter-spacing: .13em !important;
}

.kzg-modern-stats .dash-active-stat {
    top: 7px !important;
    right: 8px !important;
    width: auto !important;
    max-width: 50%;
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.kzg-modern-server-section > .card {
    height: 100%;
    min-height: 510px;
    margin-bottom: 0;
}

.kzg-modern-server-section .card-header {
    min-height: 53px;
    padding: 14px 17px !important;
    text-align: left !important;
}

.kzg-modern-server-section .card-header h5 {
    margin: 0 !important;
    text-align: left !important;
    font-size: 14px;
}

.kzg-modern-server-section .card-header h5::before {
    content: "\f233";
    margin-right: 9px;
    color: #50c57a;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.kzg-modern-server-section .card-body {
    padding: 10px 13px 13px !important;
}

.kzg-modern-server-section table {
    margin: 0;
}

.kzg-modern-server-section .table th {
    padding: 9px 10px !important;
}

.kzg-modern-server-section .table td {
    padding: 11px 10px !important;
    font-size: 11px !important;
}

.kzg-modern-recent > .row {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    gap: 14px;
    margin: 0 !important;
}

.kzg-modern-recent > .row > .col-md-6 {
    display: flex;
    flex: 1 1 0;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.kzg-modern-recent .card {
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
}

.kzg-modern-recent .card-header {
    min-height: 47px;
    padding: 12px 13px !important;
}

.kzg-modern-recent .card-header h5 {
    margin: 0 !important;
    text-align: left !important;
    font-size: 12px !important;
}

.kzg-modern-recent .card-body {
    padding: 6px 9px 9px !important;
}

.kzg-modern-recent table {
    margin: 0 !important;
}

.kzg-modern-recent .table th {
    padding: 7px 4px !important;
    font-size: 7.5px !important;
}

.kzg-modern-recent .table td {
    padding: 7px 4px !important;
    font-size: 9px !important;
    white-space: nowrap;
}

.kzg-modern-dashboard .chart-section {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

.sidebar-wrapper {
    box-shadow: 8px 0 38px rgba(0,0,0,.22);
}

.sidebar-wrapper .profile-info {
    margin: 8px 10px 14px !important;
    padding: 11px !important;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle {
    min-height: 43px;
    padding: 9px 11px !important;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle span {
    font-size: 11px !important;
    font-weight: 600;
}

@media (max-width: 1180px) {

    .kzg-modern-dashboard {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(320px, .75fr);
    }
}

@media (max-width: 991px) {

    .kzg-modern-dashboard {
        display: block !important;
    }

    .kzg-modern-dashboard > section {
        margin-bottom: 14px !important;
    }

    .kzg-modern-server-section > .card {
        min-height: 0;
    }

    .kzg-modern-recent > .row {
        display: block !important;
    }

    .kzg-modern-recent > .row > .col-md-6 {
        display: block;
        margin-bottom: 14px;
        width: 100% !important;
    }

    .kzg-modern-hero::before {
        width: 68%;
        opacity: .44;
    }

    .kzg-modern-hero-content {
        max-width: 66%;
    }
}

@media (max-width: 650px) {

    .kzg-modern-hero-content {
        max-width: 100%;
    }

    .kzg-modern-hero::before {
        width: 100%;
        opacity: .16;
    }
}


/*
 * ============================================================
 * KZG MODERN V2.2 — VISUAL POLISH
 * CSS ONLY
 * ============================================================
 */


/* ---------- Overall dashboard proportions ---------- */

.kzg-modern-dashboard {
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(385px, .78fr) !important;

    column-gap: 14px !important;
    row-gap: 14px !important;

    max-width: 1760px !important;
}


/* ---------- Header / navbar ---------- */

.header-container .header {
    min-height: 52px !important;
}

.header-container {
    background: rgba(11, 14, 29, .94) !important;

    border-bottom:
        1px solid rgba(116, 89, 211, .14) !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,.18) !important;
}


/* ---------- Hero ---------- */

.kzg-modern-hero {
    min-height: 224px !important;

    padding:
        29px 31px !important;

    border-color:
        rgba(124, 91, 232, .44) !important;

    box-shadow:
        0 17px 48px rgba(0,0,0,.32),
        0 0 37px rgba(103,72,220,.10) !important;
}

.kzg-modern-eyebrow {
    color: #9f8df8 !important;

    font-size: 10px !important;

    letter-spacing: .22em !important;
}

.kzg-modern-hero h1 {
    margin-bottom: 7px !important;

    font-size:
        clamp(29px, 2vw, 39px) !important;
}

.kzg-modern-hero p {
    margin-bottom: 15px !important;

    font-size: 12px !important;

    color: #929dbc !important;
}

.kzg-modern-chip {
    padding:
        5px 9px !important;

    font-size:
        9px !important;

    background:
        rgba(8, 11, 25, .69) !important;

    border-color:
        rgba(133, 101, 228, .28) !important;
}


/* ---------- Version strip ---------- */

.kzg-modern-overview > .note.note-primary {
    margin-bottom: 8px !important;

    padding:
        7px 11px !important;

    font-size:
        9px !important;

    border-radius:
        7px !important;

    opacity: .86;
}


/* ---------- Stat cards ---------- */

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

    border-color:
        rgba(126, 96, 220, .27) !important;

    background:
        linear-gradient(
            135deg,
            rgba(25, 28, 49, .97),
            rgba(17, 20, 38, .98)
        ) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.018) !important;
}

.kzg-modern-stats .card:hover {
    transform: translateY(-1px);

    border-color:
        rgba(135, 99, 236, .48) !important;

    box-shadow:
        0 15px 34px rgba(0,0,0,.28),
        0 0 25px rgba(104,73,222,.07) !important;
}

.kzg-modern-stats .card-body {
    padding:
        16px 17px !important;
}

.kzg-modern-stats .fa-3x {
    width: 44px !important;
    height: 44px !important;

    font-size:
        19px !important;
}

.kzg-modern-stats h1 {
    font-size:
        26px !important;
}

.kzg-modern-stats p {
    font-size:
        8px !important;

    color:
        #8f99b7 !important;
}


/* CRITICAL: make Active status a real pill instead of full bar */

.kzg-modern-stats .dash-active-stat {
    position: absolute !important;

    top: 8px !important;
    right: 9px !important;
    left: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    padding:
        3px 7px !important;

    margin: 0 !important;

    border-radius:
        999px !important;

    font-size:
        7px !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .015em;

    white-space: nowrap;

    box-shadow:
        none !important;
}

.kzg-modern-stats .badge-light-danger {
    color: #ff8b97 !important;

    background:
        rgba(209, 61, 77, .14) !important;

    border:
        1px solid rgba(225, 73, 89, .22) !important;
}

.kzg-modern-stats .badge-light-warning {
    color: #e7ca70 !important;

    background:
        rgba(210, 166, 57, .12) !important;

    border:
        1px solid rgba(223, 177, 62, .20) !important;
}


/* ---------- Server panel ---------- */

.kzg-modern-server-section > .card {
    min-height:
        500px !important;

    border-color:
        rgba(121, 94, 217, .28) !important;
}

.kzg-modern-server-section .card-header {
    min-height:
        48px !important;

    padding:
        11px 14px !important;
}

.kzg-modern-server-section .card-header h5 {
    font-size:
        12px !important;
}

.kzg-modern-server-section .card-body {
    padding:
        8px 10px 11px !important;
}

.kzg-modern-server-section .table thead th {
    padding:
        8px 8px !important;

    font-size:
        7.5px !important;

    letter-spacing:
        .11em !important;
}

.kzg-modern-server-section .table tbody td {
    padding:
        9px 8px !important;

    font-size:
        9.5px !important;
}

.kzg-modern-server-section tbody tr:hover {
    background:
        rgba(80, 91, 151, .11) !important;
}


/* ---------- Recent cards ---------- */

.kzg-modern-recent > .row {
    gap:
        12px !important;
}

.kzg-modern-recent .card {
    border-color:
        rgba(122, 94, 218, .28) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 22, 42, .98),
            rgba(12, 16, 32, .98)
        ) !important;
}

.kzg-modern-recent .card-header {
    min-height:
        44px !important;

    padding:
        10px 11px !important;
}

.kzg-modern-recent .card-header h5 {
    font-size:
        10px !important;

    letter-spacing:
        .015em;
}

.kzg-modern-recent .card-body {
    padding:
        5px 7px 8px !important;
}

.kzg-modern-recent .table thead th {
    padding:
        6px 4px !important;

    font-size:
        6.8px !important;

    letter-spacing:
        .08em !important;
}

.kzg-modern-recent .table tbody td {
    padding:
        8px 4px !important;

    font-size:
        8px !important;

    line-height:
        1.25 !important;
}

.kzg-modern-recent .badge {
    padding:
        4px 7px !important;

    font-size:
        7px !important;
}


/* ---------- Generic card enhancement ---------- */

.kzg-modern-dashboard .card {
    border-color:
        rgba(119, 91, 213, .26) !important;
}

.kzg-modern-dashboard .card-header {
    background:
        rgba(14, 18, 36, .75) !important;
}


/* ---------- Sidebar ---------- */

.sidebar-wrapper {
    border-right:
        1px solid rgba(121, 91, 219, .19) !important;

    background:
        radial-gradient(
            circle at 35% 0%,
            rgba(91, 65, 194, .12),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #0b0e1c,
            #090b16
        ) !important;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle {
    min-height:
        41px !important;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle span {
    font-size:
        10px !important;
}

.sidebar-wrapper .menu-categories li.menu.active > .dropdown-toggle {
    background:
        linear-gradient(
            100deg,
            #536de9,
            #6551e4
        ) !important;

    box-shadow:
        0 7px 22px rgba(76, 72, 218, .30),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.sidebar-wrapper .profile-info {
    border-color:
        rgba(119, 88, 219, .26) !important;

    background:
        linear-gradient(
            135deg,
            rgba(25, 28, 50, .92),
            rgba(12, 16, 31, .96)
        ) !important;
}


/* ---------- Better table contrast ---------- */

.table thead th {
    background:
        rgba(12, 16, 32, .88) !important;
}

.table tbody tr {
    border-bottom:
        1px solid rgba(116, 99, 171, .065) !important;
}


/* ---------- Slightly richer purple edges ---------- */

.kzg-modern-dashboard .card,
.kzg-modern-hero {
    outline:
        1px solid rgba(92, 68, 182, .025);
}


/* ---------- Responsive ---------- */

@media (max-width: 1250px) {

    .kzg-modern-dashboard {
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(340px, .75fr) !important;
    }
}

@media (max-width: 991px) {

    .kzg-modern-dashboard {
        display:
            block !important;
    }
}


/*
 * ============================================================
 * KZG MODERN V2.3 — FINAL UI REFINEMENT
 * CSS ONLY
 * ============================================================
 */


/* ============================================================
   GLOBAL READABILITY
   ============================================================ */

body {
    font-size: 13px;
}

.card {
    border-color:
        rgba(126, 96, 223, .30) !important;

    box-shadow:
        0 13px 34px rgba(0,0,0,.25),
        0 0 0 1px rgba(101,77,190,.025) !important;
}

.card-header {
    border-bottom:
        1px solid rgba(123, 94, 213, .18) !important;
}


/* ============================================================
   DASHBOARD SCALE
   ============================================================ */

.kzg-modern-dashboard {
    grid-template-columns:
        minmax(0, 1.50fr)
        minmax(405px, .80fr) !important;

    max-width:
        1780px !important;

    column-gap:
        15px !important;
}


/* ============================================================
   HERO FINISH
   ============================================================ */

.kzg-modern-hero {
    border-color:
        rgba(131, 93, 239, .50) !important;

    background:
        linear-gradient(
            92deg,
            rgba(9,14,31,.995) 0%,
            rgba(14,19,43,.98) 40%,
            rgba(23,23,59,.94) 69%,
            rgba(39,21,80,.88) 100%
        ) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.33),
        0 0 45px rgba(103,68,224,.105) !important;
}

.kzg-modern-hero::before {
    opacity:
        .97 !important;

    filter:
        contrast(1.06)
        saturate(1.08);
}

.kzg-modern-hero h1 {
    text-shadow:
        0 3px 16px rgba(0,0,0,.18);
}

.kzg-modern-chip {
    color:
        #d9def2 !important;

    border-color:
        rgba(139,105,231,.33) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 4px 12px rgba(0,0,0,.12);
}


/* ============================================================
   STATS
   ============================================================ */

.kzg-modern-stats .card {
    border-color:
        rgba(132, 100, 230, .32) !important;
}

.kzg-modern-stats h1 {
    font-size:
        27px !important;
}

.kzg-modern-stats p {
    font-size:
        8.5px !important;
}

.kzg-modern-stats .dash-active-stat {
    top:
        9px !important;

    right:
        10px !important;

    padding:
        4px 8px !important;

    font-size:
        7.5px !important;

    font-weight:
        800 !important;
}


/* ============================================================
   SERVER TABLE
   ============================================================ */

.kzg-modern-server-section .table thead th {
    font-size:
        8px !important;

    color:
        #909bb9 !important;
}

.kzg-modern-server-section .table tbody td {
    font-size:
        10px !important;

    color:
        #e3e7f5 !important;
}

.kzg-modern-server-section .table tbody tr {
    transition:
        background .12s ease,
        box-shadow .12s ease;
}

.kzg-modern-server-section .table tbody tr:hover {
    background:
        rgba(83, 96, 159, .13) !important;

    box-shadow:
        inset 3px 0 0
        rgba(119, 91, 227, .60);
}

.kzg-modern-server-section .btn {
    min-width:
        68px;

    padding:
        6px 11px !important;

    font-size:
        10px !important;
}


/* ============================================================
   RECENT BANS / MUTES
   ============================================================ */

.kzg-modern-recent {
    min-width:
        0;
}

.kzg-modern-recent .card-header h5 {
    font-size:
        11px !important;

    color:
        #e9ecf8 !important;
}

.kzg-modern-recent .table thead th {
    font-size:
        7.2px !important;

    color:
        #909ab9 !important;
}

.kzg-modern-recent .table tbody td {
    font-size:
        8.6px !important;

    color:
        #dfe3f3 !important;
}

.kzg-modern-recent .table tbody tr:hover {
    background:
        rgba(82, 91, 149, .09) !important;
}

.kzg-modern-recent .badge {
    font-size:
        7.5px !important;

    padding:
        4px 7px !important;
}


/* ============================================================
   DATATABLE CONTROLS
   Ban List / Mute List / Admin pages
   ============================================================ */

.dataTables_wrapper {
    color:
        #aeb6cf !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color:
        #9da7c2 !important;
}

.dataTables_wrapper .dataTables_length {
    margin-bottom:
        8px;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom:
        10px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color:
        #9ea8c4 !important;

    font-size:
        11px !important;

    font-weight:
        600;
}

.dataTables_wrapper .dataTables_length select {
    min-width:
        58px;

    height:
        32px;

    padding:
        4px 8px !important;

    color:
        #e6e9f5 !important;

    background-color:
        #0c1021 !important;

    border:
        1px solid
        rgba(124, 101, 204, .30) !important;

    border-radius:
        7px !important;
}

.dataTables_wrapper .dataTables_filter input {
    min-width:
        210px;

    height:
        32px;

    margin-left:
        7px !important;

    padding:
        5px 10px !important;

    color:
        #e8ebf7 !important;

    background:
        #0c1021 !important;

    border:
        1px solid
        rgba(126, 101, 207, .32) !important;

    border-radius:
        7px !important;

    outline:
        none !important;

    transition:
        border-color .14s ease,
        box-shadow .14s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color:
        rgba(128, 92, 232, .72) !important;

    box-shadow:
        0 0 0 3px
        rgba(118, 83, 221, .10) !important;
}


/* ============================================================
   DATATABLE PAGINATION
   Removes the white buttons from Bans page
   ============================================================ */

.dataTables_wrapper .dataTables_paginate {
    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    margin-top:
        12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        31px;

    height:
        31px;

    margin:
        0 2px !important;

    padding:
        0 8px !important;

    color:
        #abb4d0 !important;

    background:
        rgba(14, 18, 35, .96) !important;

    border:
        1px solid
        rgba(116, 96, 184, .23) !important;

    border-radius:
        7px !important;

    box-shadow:
        none !important;

    font-size:
        10px !important;

    transition:
        background .12s ease,
        color .12s ease,
        border-color .12s ease,
        transform .12s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color:
        #fff !important;

    background:
        rgba(91, 75, 178, .20) !important;

    border-color:
        rgba(128, 96, 223, .45) !important;

    transform:
        translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #526ee9,
            #754fdf
        ) !important;

    border-color:
        rgba(130, 96, 229, .72) !important;

    box-shadow:
        0 5px 14px
        rgba(79, 69, 201, .23) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color:
        #505871 !important;

    background:
        rgba(12, 15, 29, .65) !important;

    border-color:
        rgba(95, 85, 135, .12) !important;

    opacity:
        .55;
}


/* Bootstrap pagination fallback */

.pagination {
    gap:
        3px;
}

.pagination .page-link {
    min-width:
        31px;

    height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #aeb6d2 !important;

    background:
        rgba(13, 17, 34, .96) !important;

    border:
        1px solid
        rgba(117, 96, 188, .22) !important;

    border-radius:
        7px !important;

    box-shadow:
        none !important;

    font-size:
        10px !important;
}

.pagination .page-item.active .page-link {
    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #536ee8,
            #754fdf
        ) !important;

    border-color:
        rgba(132, 96, 230, .72) !important;
}

.pagination .page-item.disabled .page-link {
    opacity:
        .45;
}


/* ============================================================
   LIST PAGE HEADERS
   ============================================================ */

.card-header.text-center h5,
.card-header.text-center h4 {
    letter-spacing:
        .01em;
}

.card > .card-header + .card-body {
    background:
        transparent !important;
}


/* Add Ban / Add Mute / similar buttons */

.card .btn-success,
.btn-success {
    border:
        1px solid
        rgba(42, 204, 149, .34) !important;

    background:
        linear-gradient(
            135deg,
            #16b881,
            #0d966f
        ) !important;

    box-shadow:
        0 6px 17px
        rgba(14, 164, 115, .18) !important;
}

.card .btn-info,
.btn-info {
    border:
        1px solid
        rgba(61, 174, 231, .32) !important;

    background:
        linear-gradient(
            135deg,
            #25a9e0,
            #238ac7
        ) !important;
}


/* ============================================================
   BANS / MUTES MAIN TABLE
   ============================================================ */

table.dataTable {
    border-collapse:
        separate !important;

    border-spacing:
        0 !important;
}

table.dataTable thead th {
    color:
        #929dbc !important;

    background:
        rgba(11, 15, 31, .92) !important;

    border-bottom:
        1px solid
        rgba(119, 96, 193, .20) !important;

    padding-top:
        10px !important;

    padding-bottom:
        10px !important;
}

table.dataTable tbody td {
    padding-top:
        11px !important;

    padding-bottom:
        11px !important;

    color:
        #e2e6f5 !important;
}

table.dataTable tbody tr:hover {
    background:
        rgba(80, 91, 150, .10) !important;
}


/* ============================================================
   STATUS / PROGRESS
   ============================================================ */

.progress {
    height:
        6px !important;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.07) !important;

    border-radius:
        999px !important;
}

.progress-bar {
    border-radius:
        999px !important;

    box-shadow:
        0 0 10px
        rgba(122, 91, 236, .22);
}


/* ============================================================
   SIDEBAR REFINEMENT
   ============================================================ */

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle span {
    font-size:
        10.5px !important;

    color:
        #abb2ca;
}

.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle i,
.sidebar-wrapper .menu-categories li.menu > .dropdown-toggle svg {
    color:
        #826ff0 !important;
}

.sidebar-wrapper .menu-categories li.menu.active > .dropdown-toggle span,
.sidebar-wrapper .menu-categories li.menu.active > .dropdown-toggle i,
.sidebar-wrapper .menu-categories li.menu.active > .dropdown-toggle svg {
    color:
        #fff !important;
}

.sidebar-wrapper .submenu li a {
    color:
        #9199b2 !important;
}

.sidebar-wrapper .submenu li.active > a {
    color:
        #dcd7ff !important;
}


/* ============================================================
   CHARTS
   ============================================================ */

.apexcharts-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
    fill:
        #7f89a6 !important;

    font-size:
        9px !important;
}

.apexcharts-legend-text {
    color:
        #9099b5 !important;

    font-size:
        9px !important;
}

.apexcharts-legend {
    padding-top:
        5px !important;
}

.apexcharts-gridline {
    stroke:
        rgba(111, 95, 166, .09) !important;
}

.apexcharts-xaxis line,
.apexcharts-yaxis line {
    stroke:
        rgba(104, 91, 151, .12) !important;
}


/* ============================================================
   SELECT TIME RANGE
   ============================================================ */

.kzg-modern-dashboard .interval-container {
    width:
        300px !important;

    margin-left:
        auto !important;
}

.kzg-modern-dashboard .interval-container label {
    margin-bottom:
        6px !important;

    font-size:
        9px !important;

    color:
        #828ca9 !important;
}

.kzg-modern-dashboard #intervalSelect {
    height:
        36px;

    font-size:
        11px !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer-wrapper {
    margin-top:
        14px;

    font-size:
        10px !important;

    color:
        #596177 !important;
}


/* ============================================================
   2560px+ SCREEN TUNING
   ============================================================ */

@media (min-width: 2200px) {

    .kzg-modern-dashboard {
        max-width:
            1840px !important;
    }

    .kzg-modern-server-section .table tbody td {
        font-size:
            10.5px !important;
    }

    .kzg-modern-recent .table tbody td {
        font-size:
            9px !important;
    }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1280px) {

    .kzg-modern-dashboard {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(350px, .75fr) !important;
    }
}

@media (max-width: 991px) {

    .kzg-modern-dashboard {
        display:
            block !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width:
            160px;
    }
}