/*
 * KZG V4.1 — PREMIUM REFINEMENT LAYER
 * Purpose: polish the working V4 design without altering data/controllers.
 * Loaded after kzg-v4-premium.css.
 */

:root {
    --k41-bg: #050914;
    --k41-panel: #081327;
    --k41-panel-hi: #0c1a32;
    --k41-header: #14243f;
    --k41-line: rgba(75, 95, 151, .34);
    --k41-line-soft: rgba(65, 82, 132, .20);
    --k41-purple: #8458ff;
    --k41-indigo: #5868ff;
    --k41-blue: #20adff;
    --k41-red: #ff405f;
    --k41-green: #08ce7a;
    --k41-text: #f5f7fb;
    --k41-muted: #9aa9c2;
    --k41-muted-2: #6f7f9a;
    --k41-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}

/* ------------------------------------------------------------
   PAGE RHYTHM + BASE TYPOGRAPHY
   ------------------------------------------------------------ */

html,
body {
    color: var(--k41-text) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    font-size: 13px;
}

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

body.kzg-dashboard-v4 .layout-px-spacing {
    padding-top: 8px !important;
}

body.kzg-dashboard-v4 .kzg-modern-dashboard {
    margin-top: 0 !important;
}

::selection {
    color: #fff;
    background: rgba(111, 76, 244, .74);
}

/* ------------------------------------------------------------
   1. TOP NAV — COMPACT, INTEGRATED, PREMIUM
   ------------------------------------------------------------ */

.header-container {
    min-height: 54px !important;
    background:
        linear-gradient(90deg, rgba(5, 11, 24, .965), rgba(7, 15, 31, .93)),
        url("./kzg-v4/kzg-topbar-background-strip.webp") center / cover no-repeat !important;
    border-bottom: 1px solid rgba(72, 92, 150, .20) !important;
    box-shadow: 0 9px 28px rgba(0, 0, 0, .18) !important;
}

.header-container .header {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 18px !important;
}

body.kzg-dashboard-v4 .header-container {
    min-height: 54px !important;
    background:
        linear-gradient(90deg, rgba(5, 10, 22, .94), rgba(6, 13, 28, .90)),
        url("./kzg-v4/kzg-topbar-background-strip.webp") center / cover no-repeat !important;
    border-bottom: 1px solid rgba(69, 88, 144, .18) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16) !important;
}

body.kzg-dashboard-v4 .header-container .header {
    min-height: 54px !important;
    height: 54px !important;
}

.header-container .navbar-item {
    align-items: center !important;
    gap: 6px;
}

.header-container .theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.header-container .theme-toggle:hover {
    background: rgba(80, 73, 157, .13) !important;
    border-color: rgba(102, 88, 184, .22);
}

.header-container .theme-toggle svg {
    width: 18px !important;
    height: 18px !important;
    color: #b9c3d7 !important;
}

.header-container #language-dropdown {
    min-width: 96px !important;
    height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 11px !important;
    color: #dce3f1 !important;
    background-color: rgba(8, 16, 32, .88) !important;
    border: 1px solid rgba(79, 95, 150, .36) !important;
    border-radius: 8px !important;
    font-size: 11px !important;
}

.user-profile-dropdown .nav-link.user {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 2px !important;
}

.user-profile-dropdown .avatar,
.user-profile-dropdown .avatar img {
    width: 32px !important;
    height: 32px !important;
}

.user-profile-dropdown .avatar img {
    box-shadow:
        0 0 0 2px rgba(112, 77, 246, .72),
        0 0 17px rgba(87, 77, 255, .22) !important;
}

/* ------------------------------------------------------------
   2. SIDEBAR — CLEANER ART CROP + BETTER NAV HIERARCHY
   ------------------------------------------------------------ */

.sidebar-wrapper.kzg-v4-sidebar {
    border-right-color: rgba(72, 80, 155, .26) !important;
    box-shadow: 12px 0 34px rgba(0, 0, 0, .27) !important;
}

.kzg-v4-sidebar #sidebar::before {
    height: 45% !important;
    background:
        linear-gradient(180deg, rgba(5, 10, 22, 0) 0%, rgba(6, 8, 20, .08) 22%, rgba(15, 4, 12, .15) 65%, rgba(16, 3, 10, .28) 100%),
        url("./kzg-v4/kzg-sidebar-background-art.webp") center bottom / 100% auto no-repeat !important;
    opacity: .98 !important;
}

.kzg-v4-sidebar #sidebar::after {
    height: 46% !important;
    background:
        radial-gradient(circle at 28% 80%, rgba(221, 26, 52, .16), transparent 38%),
        linear-gradient(180deg, rgba(5, 10, 22, 0), rgba(8, 5, 16, .10) 58%, rgba(10, 3, 10, .22)) !important;
}

.kzg-v4-sidebar .theme-brand {
    min-height: 68px !important;
    padding: 8px 13px !important;
}

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

.kzg-v4-sidebar .theme-text .nav-link {
    font-size: 21px !important;
    letter-spacing: .015em;
}

.kzg-v4-sidebar .profile-info {
    margin: 10px 10px 8px !important;
    padding: 10px 11px !important;
    border-color: rgba(79, 81, 149, .29) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.018), 0 7px 19px rgba(0,0,0,.16) !important;
}

.kzg-v4-sidebar-search {
    height: 34px !important;
    margin: 0 10px 10px !important;
    border-radius: 7px !important;
}

.kzg-v4-sidebar-search input {
    font-size: 10.5px !important;
}

.kzg-v4-sidebar .menu-categories {
    padding: 0 9px 210px !important;
}

.kzg-v4-sidebar .menu-categories > li.menu {
    margin: 3px 0 !important;
}

.kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle {
    min-height: 40px !important;
    padding: 7px 10px !important;
    border-radius: 7px !important;
}

.kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle span {
    font-size: 11.5px !important;
    letter-spacing: .005em;
}

.kzg-v4-sidebar .menu-categories li.menu > .dropdown-toggle i:first-child {
    font-size: 15px !important;
}

.kzg-v4-sidebar .menu-categories li.menu.active > .dropdown-toggle {
    background: linear-gradient(100deg, #7042ef 0%, #5d56ef 52%, #536ff5 100%) !important;
    border-color: rgba(125, 102, 250, .70) !important;
    box-shadow:
        0 7px 17px rgba(72, 54, 203, .25),
        inset 0 1px rgba(255, 255, 255, .10) !important;
}

.kzg-v4-menu-count {
    min-width: 30px !important;
    padding: 4px 7px !important;
    color: #e6ebf7 !important;
    background: rgba(39, 54, 81, .88) !important;
    border-color: rgba(121, 137, 179, .31) !important;
    font-size: 8.5px !important;
}

.kzg-v4-sidebar-brand-word {
    font-size: 31px !important;
    color: #ef2a48 !important;
    text-shadow: 0 5px 20px rgba(238, 38, 69, .16) !important;
}

/* User explicitly did not want the slogan in the live panel. */
.kzg-v4-sidebar-brand-line {
    display: none !important;
}

/* ------------------------------------------------------------
   3. HERO — BETTER BALANCE, LEGIBILITY AND ART DIRECTION
   ------------------------------------------------------------ */

.kzg-modern-dashboard {
    grid-template-columns: minmax(0, 1.60fr) minmax(390px, .84fr) !important;
    gap: 13px !important;
    max-width: 1760px !important;
}

body.kzg-dashboard-v4 .kzg-modern-dashboard::before {
    width: 60% !important;
    height: 236px !important;
    background:
        linear-gradient(90deg, #050914 0%, rgba(5, 9, 20, .92) 14%, rgba(5, 9, 20, .56) 31%, rgba(5, 9, 20, .16) 60%, rgba(5, 9, 20, .02) 100%),
        url("./kzg-v4/kzg-hero-banner-background.webp") right center / auto 104% no-repeat !important;
    box-shadow: none !important;
}

body.kzg-dashboard-v4 .kzg-modern-dashboard::after {
    width: 62% !important;
    height: 236px !important;
    background:
        radial-gradient(circle at 80% 48%, rgba(225, 24, 52, .13), transparent 34%),
        linear-gradient(90deg, transparent 35%, rgba(79, 38, 149, .035)) !important;
}

.kzg-modern-hero {
    min-height: 78px !important;
    padding: 8px 8px 3px !important;
}

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

.kzg-v4-welcome-avatar {
    width: 56px !important;
    height: 56px !important;
    margin-right: 14px !important;
    border-radius: 12px !important;
    border-color: rgba(108, 80, 237, .64) !important;
}

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

.kzg-v4-welcome-copy h1 {
    font-size: 25px !important;
    line-height: 1.08 !important;
}

.kzg-v4-welcome-copy p {
    margin-top: 4px !important;
    font-size: 11px !important;
    color: #9ca9c0 !important;
}

.kzg-v4-dashboard-search {
    top: 10px !important;
    right: 305px !important;
    width: 342px !important;
    height: 39px !important;
    padding: 0 10px 0 13px !important;
    background: rgba(6, 16, 32, .86) !important;
    border-color: rgba(76, 96, 151, .42) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.014) !important;
}

.kzg-v4-dashboard-search:focus-within {
    border-color: rgba(106, 80, 235, .70) !important;
    box-shadow: 0 0 0 3px rgba(100, 72, 229, .09), 0 10px 26px rgba(0,0,0,.15) !important;
}

.kzg-v4-dashboard-search input {
    font-size: 10.5px !important;
}

.kzg-v41-keyhint {
    flex: 0 0 auto;
    padding: 3px 6px;
    color: #75839e;
    background: rgba(17, 29, 52, .86);
    border: 1px solid rgba(77, 92, 144, .32);
    border-radius: 5px;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .03em;
}

.kzg-v4-community-brand {
    top: 61px !important;
    right: 23px !important;
    padding: 7px 9px 7px 11px;
    background: linear-gradient(90deg, rgba(6, 10, 20, .08), rgba(5, 9, 18, .30));
    border-left: 2px solid rgba(229, 43, 71, .48);
    border-radius: 4px;
    text-shadow: 0 2px 9px rgba(0,0,0,.62);
}

.kzg-v4-community-brand strong {
    color: #d6def0 !important;
    font-size: 19px !important;
}

.kzg-v4-community-brand strong span {
    color: #ef304c !important;
}

.kzg-v4-community-brand small {
    color: #9aa7bf !important;
    font-size: 7.3px !important;
}

/* ------------------------------------------------------------
   4. STAT CARDS — CONTROLLED GLOW, STRONGER HIERARCHY
   ------------------------------------------------------------ */

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

.kzg-modern-stats {
    width: 74% !important;
    gap: 10px !important;
    padding: 0 8px 1px !important;
}

.kzg-modern-stats .card {
    height: 111px !important;
    min-height: 111px !important;
    border-color: rgba(92, 75, 196, .51) !important;
    border-radius: 9px !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .23),
        inset 0 1px rgba(255, 255, 255, .024) !important;
    transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.kzg-modern-stats .card:hover {
    transform: translateY(-2px);
    border-color: rgba(113, 88, 232, .70) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.27), 0 0 16px rgba(90,65,210,.07) !important;
}

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

.kzg-modern-stats .card-body {
    padding: 13px 14px !important;
}

.kzg-modern-stats .fa-3x {
    width: 54px !important;
    height: 54px !important;
    border-radius: 13px !important;
    font-size: 23px !important;
}

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

.kzg-modern-stats p {
    font-size: 10.5px !important;
    color: #dfe4ee !important;
}

.kzg-v4-stat-subline {
    margin-top: 5px !important;
    font-size: 8.2px !important;
}

.kzg-modern-stats .dash-active-stat {
    left: 82px !important;
    bottom: 11px !important;
    padding: 3px 6px !important;
    font-size: 7.8px !important;
}

.kzg-modern-stats .col-xl-3:nth-child(1) .card {
    border-color: rgba(28, 152, 231, .50) !important;
}
.kzg-modern-stats .col-xl-3:nth-child(2) .card {
    border-color: rgba(220, 48, 79, .52) !important;
}
.kzg-modern-stats .col-xl-3:nth-child(3) .card {
    border-color: rgba(20, 181, 113, .50) !important;
}
.kzg-modern-stats .col-xl-3:nth-child(4) .card {
    border-color: rgba(113, 75, 230, .55) !important;
}

/* ------------------------------------------------------------
   5. MAIN DASHBOARD PANELS — FIT THE VIEWPORT, REMOVE DEAD SPACE
   ------------------------------------------------------------ */

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

.kzg-modern-server-section .table-responsive {
    max-height: 518px;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 81, 204, .58) rgba(5, 12, 25, .35);
}

.kzg-modern-server-section .table-responsive::-webkit-scrollbar {
    width: 8px;
}

.kzg-modern-server-section .table-responsive::-webkit-scrollbar-track {
    background: rgba(5, 12, 25, .36);
}

.kzg-modern-server-section .table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(#4f60d9, #804fe7);
    border: 2px solid rgba(5, 12, 25, .7);
    border-radius: 999px;
}

.kzg-modern-server-section .table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.kzg-modern-recent > .row {
    height: 100% !important;
    gap: 10px !important;
}

.kzg-modern-recent > .row > .col-md-6 {
    min-height: 0;
}

.kzg-modern-recent .card {
    min-height: 0 !important;
}

/* The old strip described the redesign itself. A production admin panel should
   use that space for real data, so it is intentionally removed. */
.kzg-v4-feature-strip {
    display: none !important;
}

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

/* ------------------------------------------------------------
   6. PANEL HEADERS + ACTIONS
   ------------------------------------------------------------ */

.kzg-v4-panel-header {
    min-height: 54px !important;
    padding: 9px 11px !important;
    background: linear-gradient(180deg, rgba(13, 28, 52, .93), rgba(10, 22, 43, .90)) !important;
    border-bottom-color: rgba(60, 81, 129, .27) !important;
}

.kzg-v4-panel-title {
    gap: 9px !important;
}

.kzg-v4-panel-title > i {
    width: 28px !important;
    height: 28px !important;
}

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

.kzg-v4-panel-title small {
    color: #8795ae !important;
    font-size: 8.5px !important;
}

.kzg-v41-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kzg-v41-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8190aa;
    font-size: 7.8px;
    white-space: nowrap;
}

.kzg-v41-live::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #12d77e;
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(18, 215, 126, .42);
}

.kzg-v41-refresh,
.kzg-v41-copy-ip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a9b4ca !important;
    background: rgba(15, 29, 53, .90) !important;
    border: 1px solid rgba(75, 92, 149, .36) !important;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

.kzg-v41-refresh {
    width: 31px;
    height: 31px;
}

.kzg-v41-refresh:hover,
.kzg-v41-copy-ip:hover {
    color: #fff !important;
    background: rgba(87, 70, 190, .22) !important;
    border-color: rgba(113, 87, 226, .62) !important;
}

.kzg-v41-refresh:hover {
    transform: rotate(18deg);
}

.kzg-v4-view-all {
    min-width: 69px !important;
    height: 31px !important;
    color: #c5b8ff !important;
    background: rgba(34, 39, 91, .77) !important;
    border-color: rgba(83, 87, 213, .53) !important;
    font-size: 8.5px !important;
}

.kzg-v4-view-all:hover {
    color: #fff !important;
    background: rgba(75, 57, 168, .38) !important;
}

/* ------------------------------------------------------------
   7. SERVER TABLE — READABLE, DENSE, PROFESSIONAL
   ------------------------------------------------------------ */

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

.kzg-modern-server-section .table thead th {
    padding: 8px 9px !important;
    color: #a9b5c9 !important;
    background: #152541 !important;
    font-size: 8.8px !important;
    letter-spacing: .045em !important;
}

.kzg-modern-server-section .table tbody td {
    padding: 8px 9px !important;
    color: #dfe5ef !important;
    font-size: 10.3px !important;
    line-height: 1.3;
}

.kzg-modern-server-section .table tbody td:first-child {
    color: #f0f3f8 !important;
    font-weight: 700;
}

.kzg-modern-server-section .table tbody td:nth-child(2),
.kzg-modern-server-section .table tbody td:nth-child(3) {
    color: #bac5d8 !important;
}

.kzg-modern-server-section .table tbody tr {
    border-bottom-color: rgba(56, 73, 111, .12) !important;
    transition: background .13s ease;
}

.kzg-modern-server-section .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(38, 56, 89, .35), rgba(27, 41, 71, .24)) !important;
}

.kzg-modern-server-section .btn {
    min-width: 66px !important;
    min-height: 28px;
    padding: 5px 9px !important;
    font-size: 8.8px !important;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(1, 150, 91, .12);
}

.kzg-v4-status {
    min-width: 56px !important;
    padding: 5px 8px !important;
    gap: 5px;
    font-size: 8.2px !important;
    letter-spacing: .01em;
}

.kzg-v4-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor;
}

.kzg-v4-online {
    background: rgba(5, 167, 100, .92) !important;
}

.kzg-v4-offline {
    background: rgba(220, 42, 70, .94) !important;
}

.kzg-v41-copy-ip {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    opacity: .20;
    vertical-align: middle;
    font-size: 9px;
}

.kzg-modern-server-section tbody tr:hover .kzg-v41-copy-ip,
.kzg-v41-copy-ip:focus-visible {
    opacity: 1;
}

.kzg-v41-copy-ip.is-copied {
    color: #22dc87 !important;
    border-color: rgba(26, 188, 112, .52) !important;
}

/* ------------------------------------------------------------
   8. RECENT BANS / MUTES
   ------------------------------------------------------------ */

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

.kzg-modern-recent .table thead th {
    padding: 7px !important;
    font-size: 8px !important;
    letter-spacing: .045em !important;
}

.kzg-modern-recent .table tbody td {
    padding: 7px !important;
    color: #dce3ee !important;
    font-size: 9.2px !important;
    line-height: 1.25;
}

.kzg-modern-recent .table tbody td:first-child {
    color: #f0f3f8 !important;
    font-weight: 700;
}

.kzg-modern-recent .badge {
    padding: 4px 6px !important;
    border-radius: 5px !important;
    font-size: 7.5px !important;
}

/* ------------------------------------------------------------
   9. GLOBAL CARDS / TABLES / FORMS — BANS, MUTES, ADMINS, ETC.
   ------------------------------------------------------------ */

body:not(.kzg-dashboard-v4) .layout-px-spacing {
    padding-top: 14px !important;
}

body:not(.kzg-dashboard-v4) .card {
    border-color: rgba(78, 75, 156, .42) !important;
    box-shadow: 0 15px 36px rgba(0,0,0,.25), 0 0 22px rgba(92,59,199,.045) !important;
}

.card-header {
    min-height: 48px;
    background: linear-gradient(180deg, rgba(15, 29, 53, .94), rgba(11, 24, 46, .93)) !important;
}

.card-header h5,
.card-header strong {
    color: #f0f3f9 !important;
}

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

.table thead th,
table.dataTable thead th {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    color: #a9b4c8 !important;
    background: #172943 !important;
    border-bottom: 1px solid rgba(72, 93, 145, .22) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase;
}

.table tbody td,
table.dataTable tbody td {
    color: #dde4ef !important;
    border-color: rgba(62, 78, 118, .10) !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

.table tbody tr,
table.dataTable tbody tr {
    transition: background .12s ease, box-shadow .12s ease;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: rgba(34, 50, 79, .31) !important;
}

.table tbody tr.table-active,
.table tbody tr.selected,
table.dataTable tbody tr.selected {
    background: linear-gradient(90deg, rgba(35, 62, 100, .72), rgba(25, 43, 73, .70)) !important;
    box-shadow: inset 2px 0 #6659ef !important;
}

.form-control,
.form-select,
select,
input[type="search"],
.dataTables_wrapper input,
.dataTables_wrapper select,
.dt-container input,
.dt-container select {
    color: #e2e8f2 !important;
    background: #0b172b !important;
    border: 1px solid rgba(77, 96, 151, .45) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.17) !important;
}

input[type="search"]::placeholder,
.form-control::placeholder {
    color: #6f7e97 !important;
}

.form-control:focus,
.form-select:focus,
input[type="search"]:focus,
.dataTables_wrapper input:focus,
.dt-container input:focus {
    border-color: rgba(103, 81, 230, .72) !important;
    box-shadow: 0 0 0 3px rgba(94, 71, 219, .095) !important;
    outline: none !important;
}

.btn {
    font-weight: 700;
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-success {
    box-shadow: 0 7px 18px rgba(4, 172, 104, .15);
}

.btn-primary {
    box-shadow: 0 7px 18px rgba(86, 89, 236, .13);
}

/* ------------------------------------------------------------
   10. DATATABLES TOOLBAR + PAGINATION — REMOVE STOCK WHITE UI
   ------------------------------------------------------------ */

.dataTables_wrapper,
.dt-container {
    color: #9da9bf !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dt-container .dt-length,
.dt-container .dt-search {
    margin-bottom: 13px !important;
    color: #9da9bf !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dt-container .dt-length label,
.dt-container .dt-search label {
    color: #91a0b9 !important;
    font-size: 10.5px !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_filter input[type="search"],
.dt-container .dt-search input[type="search"] {
    width: 220px !important;
    min-width: 180px;
    height: 34px !important;
    margin-left: 7px !important;
    padding: 6px 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.dataTables_wrapper .dataTables_length select,
.dt-container .dt-length select {
    width: 68px !important;
    height: 34px !important;
    margin: 0 6px !important;
    padding: 4px 24px 4px 8px !important;
}

.dataTables_wrapper .dataTables_info,
.dt-container .dt-info {
    padding-top: 12px !important;
    color: #8f9db5 !important;
    font-size: 10px !important;
}

.pagination,
.dataTables_wrapper .dataTables_paginate,
.dt-container .dt-paging {
    gap: 4px !important;
}

.pagination .page-item .page-link,
.pagination li a,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-container .dt-paging .dt-paging-button,
.dt-container .dt-paging button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    margin: 0 1px !important;
    color: #aab6cb !important;
    background: #0d192d !important;
    background-image: none !important;
    border: 1px solid rgba(76, 91, 143, .38) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 9.5px !important;
    text-decoration: none !important;
}

.pagination .page-item.active .page-link,
.pagination li.active a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging button.current {
    color: #fff !important;
    background: linear-gradient(110deg, #6842ed, #5069f5) !important;
    border-color: rgba(111, 89, 240, .78) !important;
    box-shadow: 0 6px 16px rgba(83,66,215,.18) !important;
}

.pagination .page-item:not(.disabled) .page-link:hover,
.pagination li:not(.disabled) a:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-container .dt-paging button:hover {
    color: #fff !important;
    background: rgba(71, 67, 154, .30) !important;
    border-color: rgba(104, 85, 212, .58) !important;
}

.pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-container .dt-paging button.disabled {
    color: #526079 !important;
    background: #091324 !important;
    opacity: .58;
}

/* ------------------------------------------------------------
   11. PROGRESS / BADGES / DROPDOWNS / MODALS
   ------------------------------------------------------------ */

.progress {
    height: 5px !important;
    background: rgba(255,255,255,.055) !important;
}

.progress-bar {
    box-shadow: 0 0 8px rgba(111, 81, 241, .18);
}

.badge {
    font-weight: 800 !important;
    letter-spacing: .005em;
}

.dropdown-menu,
.select2-dropdown {
    color: #dfe5ef !important;
    background: rgba(8, 17, 34, .985) !important;
    border: 1px solid rgba(78, 94, 149, .38) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.38) !important;
}

.dropdown-item {
    color: #b8c3d7 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff !important;
    background: rgba(83, 67, 170, .22) !important;
}

.modal-content {
    border-color: rgba(99, 75, 205, .48) !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.50) !important;
}

/* ------------------------------------------------------------
   12. CHARTS — LESS EMPTY, LESS CLUTTER
   ------------------------------------------------------------ */

.kzg-modern-dashboard .chart-section {
    padding-top: 1px !important;
    margin-top: 0 !important;
}

.kzg-modern-dashboard .chart-section .interval-container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 9px;
    padding: 3px 0 9px !important;
    background: transparent !important;
}

.kzg-modern-dashboard .chart-section .interval-container label {
    margin: 0 0 7px !important;
    color: #7f8ca4 !important;
    font-size: 7.8px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kzg-modern-dashboard .chart-section #intervalSelect {
    width: 190px !important;
    height: 34px !important;
    font-size: 9.5px !important;
}

.kzg-modern-dashboard .chart-section .card {
    min-height: 300px !important;
    box-shadow: 0 11px 28px rgba(0,0,0,.21) !important;
}

.kzg-modern-dashboard .chart-section .card-header {
    min-height: 48px !important;
    padding: 10px 12px !important;
}

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

.kzg-modern-dashboard .chart-section .card-body {
    padding: 12px 16px 10px !important;
}

.apexcharts-legend {
    display: none !important;
}

.apexcharts-xaxis text,
.apexcharts-yaxis text,
.apexcharts-text {
    fill: #71809a !important;
    color: #71809a !important;
    font-size: 8px !important;
}

.apexcharts-gridline {
    stroke: rgba(82, 98, 145, .13) !important;
}

.apexcharts-xaxis line,
.apexcharts-yaxis line {
    stroke: rgba(78, 92, 138, .16) !important;
}

.apexcharts-text.apexcharts-datalabel-value,
.apexcharts-text.apexcharts-datalabel-label {
    fill: #9ca8bd !important;
}

/* ------------------------------------------------------------
   13. FOOTER + ACCESSIBILITY / MICRO-MOTION
   ------------------------------------------------------------ */

.footer-wrapper {
    padding-top: 14px !important;
    color: #606e86 !important;
    font-size: 9.5px !important;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid rgba(116, 85, 244, .80) !important;
    outline-offset: 2px;
}

.card,
.kzg-v4-view-all,
.btn,
.kzg-v4-sidebar .dropdown-toggle {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ------------------------------------------------------------
   14. RESPONSIVE TUNING — 1440P, 1080P, WINDOWS 125%, MOBILE
   ------------------------------------------------------------ */

@media (max-width: 1540px) {
    .kzg-modern-dashboard {
        grid-template-columns: minmax(0, 1.48fr) minmax(365px, .82fr) !important;
    }

    .kzg-modern-stats {
        width: 78% !important;
    }

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

    .kzg-v4-community-brand {
        right: 17px !important;
    }
}

@media (max-width: 1260px) {
    .kzg-modern-dashboard {
        grid-template-columns: minmax(0, 1.38fr) minmax(335px, .78fr) !important;
    }

    .kzg-modern-stats {
        width: 84% !important;
    }

    .kzg-v4-dashboard-search {
        right: 190px !important;
        width: 270px !important;
    }

    .kzg-v4-community-brand {
        display: none !important;
    }

    .kzg-v41-live {
        display: none;
    }
}

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

    body.kzg-dashboard-v4 .kzg-modern-dashboard::before {
        opacity: .42;
    }

    .kzg-v4-dashboard-search {
        right: 12px !important;
        width: 270px !important;
    }
}

@media (max-width: 991px) {
    body.kzg-dashboard-v4 .layout-px-spacing {
        padding-top: 5px !important;
    }

    .kzg-v4-dashboard-search {
        width: 100% !important;
        margin-top: 10px !important;
    }

    .kzg-modern-server-section .table-responsive {
        max-height: 460px;
    }

    .kzg-v41-keyhint,
    .kzg-v41-live {
        display: none;
    }

    .kzg-v4-sidebar #sidebar::before {
        background-size: auto 100% !important;
    }
}

@media (max-width: 620px) {
    .layout-px-spacing {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .kzg-v4-panel-header {
        align-items: flex-start !important;
    }

    .kzg-v41-panel-actions {
        gap: 4px;
    }

    .kzg-v4-view-all {
        min-width: 58px !important;
    }

    .dataTables_wrapper .dataTables_filter input[type="search"],
    .dt-container .dt-search input[type="search"] {
        width: 100% !important;
        margin: 6px 0 0 !important;
    }
}