/* =========================================================
   ROOT
========================================================= */

:root {
    --bg: #0b1120;
    --bg-dark: #070b14;

    --card: #162132;
    --card2: #111827;

    --border: #2a3954;
    --border-light: #334155;

    --text: #ffffff;
    --muted: #94a3b8;

    --blue: #3b82f6;
    --blue-dark: #2563eb;

    --green: #22c55e;
    --orange: #f59e0b;
    --red: #ef4444;
    --purple: #8b5cf6;

    --cyan: #38bdf8;
    --yellow: #facc15;

    --alert-height: 45px;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    font-family: Inter, Arial, sans-serif;

    background:
        linear-gradient(
            180deg,
            var(--bg-dark) 0%,
            #0f172a 100%
        );

    color: var(--text);

    padding-bottom: var(--alert-height);

    overflow-x: hidden;
}

button,
input,
select {
    font-family: inherit;
}

button {
    cursor: pointer;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: 96%;
    max-width: 1700px;

    margin: 0 auto;

    padding: 25px 0;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    flex-wrap: wrap;
}

.header h1 {
    font-size: 28px;
    font-weight: 800;
}

.header p {
    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;
}

.header-buttons {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

.header-right {
    display: flex;

    align-items: center;

    gap: 10px;
}


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

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 10px 16px;

    border-radius: var(--radius-md);

    background: #1f2937;

    border: 1px solid #2d3b56;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

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

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

    border-color: #45628d;
}

.btn.primary {
    background:
        linear-gradient(
            90deg,
            var(--blue-dark),
            #4f46e5
        );

    border-color: transparent;
}


/* =========================================================
   INPUTS / SELECT
========================================================= */

.refresh-select,
.search-box {
    height: 38px;

    padding: 9px 12px;

    border-radius: var(--radius-md);

    background: #1f2937;

    border: 1px solid #2d3b56;

    color: #fff;

    font-size: 13px;

    outline: none;

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

.refresh-select:focus,
.search-box:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .12);
}

.refresh-select {
    cursor: pointer;
}

.search-box {
    min-width: 180px;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 20px;
}

.summary-card {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);
}

.summary-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);

    font-size: 18px;
}

.summary-card h2 {
    font-size: 20px;
}

.summary-card span {
    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   SERVER GRID
========================================================= */

.server-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


/* =========================================================
   SERVER CARD
========================================================= */

.server-card {
    min-width: 0;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: 14px;

    overflow: hidden;

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

.server-card:hover {
    transform: translateY(-4px);

    border-color: var(--blue);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);
}


/* =========================================================
   SERVER HEADER
========================================================= */

.server-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}

.server-header h3 {
    min-width: 0;

    font-size: 25px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.server-header span {
    color: var(--muted);

    font-size: 11px;
}


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

.badge {
    flex-shrink: 0;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 700;
}

.badge.online {
    background: rgba(34, 197, 94, .15);

    color: var(--green);
}

.badge.offline {
    background: rgba(239, 68, 68, .15);

    color: var(--red);
}


/* =========================================================
   LOAD AVG
========================================================= */

.load-avg {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 8px;

    border-radius: 8px;

    background: rgba(255, 255, 255, .05);

    color: var(--muted);

    font-size: 10px;

    white-space: nowrap;
}

.load-avg .load-value {
    color: var(--cyan);

    font-size: 30px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   RESOURCE CIRCLES
========================================================= */

.circle-area {
    display: flex;

    align-items: normal;
    justify-content: space-around;

    gap: 6px;

    margin: 16px 0;
}

.circle-item {
    width: 24%;

    min-width: 0;

    text-align: center;
}

.circle {
    --size: 100px;

    width: var(--size);
    height: var(--size);

    margin: 5px auto;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;
}

.circle::after {
    content: "";

    position: absolute;

    inset: 15px;

    background: var(--card2);

    border-radius: 50%;

    z-index: 1;
}

.circle span {
    position: relative;

    z-index: 2;

    font-size: 20px;

    font-weight: 700;
}

.load-circle {
    background:
        conic-gradient(
            var(--cyan) 0%,
            #2a364b 0
        );
}

.load-circle span {
    font-size: 11px;
}

.circle-item h4 {
    margin-top: 6px;

    font-size: 11px;

    font-weight: 600;
}

.circle-item small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   CPU BOX
========================================================= */

.cpu-box {
    margin-top: 10px;

    padding: 10px;

    background: var(--card2);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);
}

.cpu-title {
    margin-bottom: 4px;

    color: var(--muted);

    font-size: 10px;
}

.cpu-model {
    font-size: 12px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   DATABASE
========================================================= */

.database-box {
    margin-top: 12px;

    padding: 12px 14px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: var(--radius-md);
}

.database-title {
    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .8px;
}

.database-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 5px 0;
}

.database-name {
    min-width: 0;

    font-size: 14px;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.database-status {
    flex-shrink: 0;

    font-size: 12px;

    font-weight: 700;
}

.database-status.online {
    color: var(--green);
}

.database-status.offline {
    color: var(--red);
}


/* =========================================================
   MONITOR BOX
========================================================= */

.monitor-box {
    margin-top: 12px;

    padding-top: 10px;

    border-top: 1px solid var(--border-light);
}

.monitor-box .line {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 6px 0;

    font-size: 13px;
}

.monitor-box .load,
.monitor-box .db {
    font-weight: 700;
}

.load {
    color: var(--cyan);
}

.db {
    color: var(--yellow);
}


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

.card-footer {
    display: flex;

    gap: 8px;

    margin-top: 12px;
}

.card-footer a,
.card-footer button {
    flex: 1;

    min-width: 0;

    padding: 8px;

    border-radius: var(--radius-md);

    border: none;

    font-size: 12px;

    text-align: center;

    text-decoration: none;

    cursor: pointer;
}

.history-btn {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            var(--blue-dark),
            #4f46e5
        );
}

.refresh-btn {
    color: #fff;

    background: #1f2937;

    border: 1px solid #2d3b56 !important;
}


/* =========================================================
   ALERT TICKER
========================================================= */

#alertTicker {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: var(--alert-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;

    align-items: center;

    background: #111827;

    border-top: 1px solid var(--border);

    overflow: hidden;

    z-index: 99999 !important;

    isolation: isolate;
}

.alert-ticker {
    display: flex;

    align-items: center;

    width: 100%;

    height: 100%;

    overflow: hidden;
}

.alert-title {
    height: 100%;

    display: flex;

    align-items: center;

    flex-shrink: 0;

    padding: 0 20px;

    background: #dc2626;

    color: #fff;

    font-weight: 800;

    white-space: nowrap;

    z-index: 2;
}

.alert-content {
    position: relative;

    flex: 1;

    min-width: 0;

    height: 100%;

    overflow: hidden;
}

#alertMessages {
    position: relative;

    width: max-content;

    min-width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    gap: 35px;

    white-space: nowrap;

    overflow: visible;
}

#alertMessages .alert-item {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    height: 100%;

    padding: 0 25px;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}

.alert-item {
    margin-right: 60px;

    font-weight: 700;
}

.alert-critical {
    color: var(--red);
}

.alert-warning {
    color: var(--orange);
}


/* =========================================================
   ALERT STATES
========================================================= */

#alertMessages.ticker-static {
    width: 100%;

    justify-content: center;

    transform: none !important;

    animation: none !important;
}

#alertMessages.ticker-running {
    animation:
        nocAlertScroll
        500s
        linear
        infinite;
}

@keyframes nocAlertScroll {

    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}


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

.modal {
    display: none;

    position: fixed;

    inset: 0;

    padding: 20px;

    background: rgba(0, 0, 0, .75);

    backdrop-filter: blur(6px);

    z-index: 999999;
}

.modal-content {
    width: 90%;
    max-width: 900px;

    margin: 40px auto;

    padding: 20px;

    background: #0f172a;

    border: 1px solid var(--border-light);

    border-radius: var(--radius-xl);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .5);
}

.modal-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}

.modal-close {
    padding: 2px 8px;

    background: transparent;

    border: none;

    border-radius: 8px;

    color: #fff;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    transition: .2s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, .18);

    color: var(--red);

    transform: scale(1.1);
}

.modal-close:focus {
    outline: none;
}

#closeModal,
#closeCpuModal {
    cursor: pointer;

    color: #fff;

    font-size: 28px;

    line-height: 1;
}

#closeModal:hover,
#closeCpuModal:hover {
    color: var(--red);
}


/* =========================================================
   CHART CONTAINERS
   همه نمودارها دقیقاً یک ارتفاع دارند
========================================================= */

#chartModal .modal-body,
#ramModal .modal-body,
#cpuModal .modal-body,
#loadChartModal .modal-body {
    position: relative;

    width: 100%;

    height: 420px !important;
    min-height: 420px !important;

    box-sizing: border-box;
}

#chartModal .chart-container,
#ramModal .chart-container,
#cpuModal .chart-container,
#loadChartModal .chart-container {
    position: relative;

    width: 100%;

    height: 420px !important;
    min-height: 420px !important;

    box-sizing: border-box;
}


/* =========================================================
   ALL CHART CANVAS
========================================================= */

#diskChart,
#ramChartCanvas,
#cpuChartCanvas,
#loadChartCanvas {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;

    box-sizing: border-box !important;

    aspect-ratio: auto !important;
}


/* =========================================================
   DISK CHART
========================================================= */

#diskChart {
    width: 100% !important;

    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}


/* =========================================================
   RAM CHART
========================================================= */

#ramChartCanvas {
    width: 100% !important;

    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}


/* =========================================================
   CPU CHART
========================================================= */

#cpuChartCanvas {
    width: 100% !important;

    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}


/* =========================================================
   LOAD CHART
========================================================= */

#loadChartCanvas {
    width: 100% !important;

    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}


/* =========================================================
   TOP SERVER WALL
========================================================= */

.top-wall {
    display: none;

    position: relative;

    margin-bottom: 25px;

    padding: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(22, 33, 50, .98),
            rgba(11, 17, 32, .98)
        );

    border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, .35);

    z-index: 10;
}

.top-wall.active {
    display: block;
}


/* =========================================================
   TOP WALL HEADER
========================================================= */

.top-wall-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.top-wall-title h2 {
    font-size: 22px;

    font-weight: 800;
}

.top-wall-title p {
    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}

.top-wall-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


/* =========================================================
   TOP SECTIONS
========================================================= */

.top-section {
    margin-bottom: 14px;
}

.top-section-title {
    height: 36px;

    display: flex;

    align-items: center;

    padding: 0 14px;

    margin-bottom: 9px;

    background: rgba(255, 255, 255, .035);

    border: 1px solid var(--border);

    border-radius: 9px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .3px;
}

.top-ram-title {
    border-left: 4px solid #eab308;
}

.top-load-title {
    border-left: 4px solid var(--red);
}

.top-cpu-title {
    border-left: 4px solid var(--green);
}


/* =========================================================
   TOP SERVER GRID
========================================================= */

.top-server-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================================
   TOP SERVER CARD
========================================================= */

.top-server-card {
    position: relative;

    min-width: 0;

    padding: 12px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

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

.top-server-card:hover {
    transform: translateY(-2px);

    border-color: var(--blue);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .25);
}


/* =========================================================
   TOP RANK
========================================================= */

.top-rank {
    position: absolute;

    top: 9px;
    left: 9px;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(59, 130, 246, .15);

    border: 1px solid rgba(59, 130, 246, .25);

    color: #fff;

    font-size: 12px;

    font-weight: 800;
}

.top-server-card.rank-1 .top-rank {
    background: rgba(234, 179, 8, .20);

    border-color: rgba(234, 179, 8, .40);

    color: #facc15;
}

.top-server-card.rank-2 .top-rank {
    background: rgba(148, 163, 184, .18);

    border-color: rgba(148, 163, 184, .35);

    color: #cbd5e1;
}

.top-server-card.rank-3 .top-rank {
    background: rgba(249, 115, 22, .18);

    border-color: rgba(249, 115, 22, .35);

    color: #fb923c;
}


/* =========================================================
   TOP SERVER HEADER
========================================================= */

.top-server-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding-left: 38px;

    margin-bottom: 10px;
}

.top-server-name {
    min-width: 0;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.top-server-status {
    flex-shrink: 0;

    padding: 4px 7px;

    border-radius: 20px;

    background: rgba(34, 197, 94, .12);

    color: var(--green);

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   TOP MAIN VALUE
========================================================= */

.top-main-value {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}

.top-main-label {
    color: var(--muted);

    font-size: 10px;
}

.top-main-number {
    font-size: 24px;

    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   TOP RESOURCES
========================================================= */

.top-resources {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;
}

.top-resource {
    min-width: 0;

    padding: 6px 4px;

    text-align: center;

    background: rgba(255, 255, 255, .035);

    border-radius: 7px;
}

.top-resource-label {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 8px;
}

.top-resource-value {
    display: block;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   TOP NOC TICKER
========================================================= */

.top-noc-ticker {
    display: flex;

    align-items: center;

    width: 100%;
    height: 40px;

    margin-top: 16px;

    overflow: hidden;

    border: 1px solid var(--border-light);

    border-radius: 9px;

    background: #0f172a;
}

.top-noc-label {
    height: 100%;

    display: flex;

    align-items: center;

    flex-shrink: 0;

    padding: 0 18px;

    background: #dc2626;

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    z-index: 2;
}

.top-noc-content {
    position: relative;

    flex: 1;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
}

#topNocMessages {
    display: inline-block;

    padding-left: 100%;

    color: #f87171;

    font-size: 11px;

    font-weight: 700;

    animation:
        topNocTicker
        500s
        linear
        infinite;
}

@keyframes topNocTicker {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


/* =========================================================
   TOP WALL FULLSCREEN
========================================================= */

.top-wall:fullscreen,
.top-wall:-webkit-full-screen {

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    padding: 24px !important;

    background: #0b1120 !important;

    border: 0 !important;

    border-radius: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 999999 !important;
}

.top-wall.fullscreen-active {
    overflow-y: auto;
}


/* =========================================================
   TOP WALL CUSTOM FULLSCREEN
========================================================= */

body.top-wall-fullscreen {

    overflow: hidden;

    padding: 0;
}

body.top-wall-fullscreen > * {

    display: none !important;
}

body.top-wall-fullscreen #topWall {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex !important;

    flex-direction: column;

    margin: 0;

    padding: 18px 22px 58px;

    background: #0b1120;

    border: 0;

    border-radius: 0;

    overflow: hidden;

    z-index: 99999;
}

body.top-wall-fullscreen .top-wall-header {

    flex-shrink: 0;

    margin-bottom: 10px;
}

body.top-wall-fullscreen .top-section {

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

    margin-bottom: 8px;
}

body.top-wall-fullscreen .top-section-title {

    flex-shrink: 0;

    height: 30px;

    margin-bottom: 6px;
}

body.top-wall-fullscreen .top-server-grid {

    flex: 1;

    min-height: 0;

    gap: 8px;
}

body.top-wall-fullscreen .top-server-card {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

body.top-wall-fullscreen .top-noc-ticker {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 42px;

    margin: 0;

    border-radius: 0;

    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}


/* =========================================================
   NOC WALL MODE
========================================================= */

body.wall-mode {

    overflow: hidden !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: 100vw !important;
    max-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #050b14 !important;
}

body.wall-mode > * {
    max-width: 100vw;
}


/* =========================================================
   HIDE NORMAL DASHBOARD IN WALL MODE
========================================================= */

body.wall-mode .background-glow,
body.wall-mode .header,
body.wall-mode .dashboard-header,
body.wall-mode .page-header,
body.wall-mode .top-header,
body.wall-mode #topWall,
body.wall-mode .top-wall,
body.wall-mode .summary,
body.wall-mode .summary-section,
body.wall-mode .summary-cards,
body.wall-mode .toolbar,
body.wall-mode .filters,
body.wall-mode .search-section,
body.wall-mode .normal-dashboard-header {
    display: none !important;
}


/* =========================================================
   WALL ALERT TICKER
========================================================= */

body.wall-mode #alertTicker {

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 42px !important;

    z-index: 999999 !important;

    margin: 0 !important;

    border-radius: 0 !important;

    overflow: hidden !important;

    display: flex !important;

    align-items: center !important;

    background:
        linear-gradient(
            90deg,
            #07111f,
            #0b1627,
            #07111f
        ) !important;

    border-top:
        1px solid rgba(59,130,246,.25) !important;

    box-shadow:
        0 -5px 25px rgba(0,0,0,.35) !important;
}


/* =========================================================
   WALL SERVER GRID
========================================================= */

body.wall-mode .server-grid {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;

    height:
        calc(100vh - 42px) !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(260px, 1fr)
        ) !important;

    grid-auto-rows:
        max-content !important;

    gap: 18px !important;

    align-content: start !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(37,99,235,.08),
            transparent 45%
        ),
        #050b14 !important;
}


/* =========================================================
   WALL SERVER CARD
========================================================= */

body.wall-mode .server-card {

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 10px !important;

    transform: none;

    box-shadow:
        0 10px 35px rgba(0,0,0,.35) !important;

    border-color:
        rgba(59,130,246,.18) !important;

    transition:
        box-shadow .3s ease,
        border-color .3s ease,
        transform .3s ease !important;
}

body.wall-mode .server-card:hover {

    transform: scale(1.015) !important;

    z-index: 20 !important;

    box-shadow:
        0 0 30px rgba(59,130,246,.18),
        0 15px 45px rgba(0,0,0,.5) !important;
}


/* =========================================================
   WALL SERVER HEADER
========================================================= */

body.wall-mode .server-header {

    flex-shrink: 0 !important;

    margin-bottom: 5px !important;
}

body.wall-mode .server-header h3 {

    max-width: 100%;

    font-size: 15px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}

body.wall-mode .load-avg {

    font-size: 11px !important;
}

body.wall-mode .status-badge {

    padding: 3px 6px !important;

    font-size: 9px !important;
}


/* =========================================================
   WALL CIRCLES
========================================================= */

body.wall-mode .circle-area {

    min-height: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-around !important;

    gap: 5px !important;

    padding: 4px 0 !important;

    margin: 8px 0 !important;
}

body.wall-mode .circle-area .circle-item {

    flex: 1 !important;

    width: auto !important;

    min-width: 0 !important;

    text-align: center !important;
}

body.wall-mode .circle {

    width:
        clamp(
            55px,
            5vw,
            95px
        ) !important;

    height:
        clamp(
            55px,
            5vw,
            95px
        ) !important;

    margin: 0 auto !important;
}

body.wall-mode .circle::after {

    inset:
        clamp(
            8px,
            .8vw,
            14px
        );
}

body.wall-mode .circle span {

    font-size:
        clamp(
            12px,
            1.2vw,
            20px
        ) !important;
}

body.wall-mode .circle-item h4 {

    margin: 3px 0 0 !important;

    font-size: 10px !important;
}

body.wall-mode .circle-item small {

    display: block !important;

    font-size: 8px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   WALL HIDE EXTRA INFO
========================================================= */

body.wall-mode .cpu-box,
body.wall-mode .monitor-box,
body.wall-mode .cpu-model,
body.wall-mode .cpu-name,
body.wall-mode .processor-name,
body.wall-mode .cpu-info-model,
body.wall-mode .cpu-box .model {

    display: none !important;
}


/* =========================================================
   WALL CARD FOOTER
========================================================= */

body.wall-mode .card-footer {

    flex-shrink: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 4px !important;

    margin-top: 5px !important;
}

body.wall-mode .card-footer button,
body.wall-mode .card-footer a {

    min-width: 0 !important;

    padding: 4px 3px !important;

    font-size: 9px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   WALL BUTTONS
========================================================= */

body.wall-mode #wallStartBtn {

    position: fixed !important;

    top: 12px !important;
    right: 130px !important;

    z-index: 1000000 !important;
}

body.wall-mode #wallStopBtn {

    position: fixed !important;

    top: 12px !important;
    right: 20px !important;

    z-index: 1000000 !important;

    opacity: .35 !important;

    transition: opacity .2s ease;
}

body.wall-mode #wallStopBtn:hover {

    opacity: 1 !important;
}


/* =========================================================
   WALL TICKER
========================================================= */

body.wall-mode #alertMessages {

    width: max-content !important;

    min-width: 100% !important;

    height: 100% !important;

    white-space: nowrap !important;

    display: flex !important;

    align-items: center !important;

    gap: 35px !important;
}

body.wall-mode #alertMessages.ticker-static {

    width: 100% !important;

    justify-content: center !important;

    transform: none !important;

    animation: none !important;
}

body.wall-mode #alertMessages.ticker-running {

    animation:
        nocAlertScroll
        500s
        linear
        infinite !important;
}

@keyframes nocAlertScroll {

    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* =========================================================
   WALL SCROLL
========================================================= */

body.wall-mode .server-grid.wall-scroll {

    overflow: hidden !important;

    animation:
        nocGridScroll
        1000s
        linear
        infinite !important;
}

@keyframes nocGridScroll {

    0% {
        transform: translateY(0);
    }

    45% {
        transform:
            translateY(
                calc(
                    -1 *
                    var(
                        --noc-scroll-distance,
                        0px
                    )
                )
            );
    }

    50% {
        transform:
            translateY(
                calc(
                    -1 *
                    var(
                        --noc-scroll-distance,
                        0px
                    )
                )
            );
    }

    95% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}


/* =========================================================
   TOP WALL STOP
========================================================= */

.wall-stop {

    animation-play-state: paused !important;
}


/* =========================================================
   TOP WALL FULLSCREEN
========================================================= */

body.wall-mode:fullscreen {

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    background: #050b14 !important;
}

body.wall-mode:fullscreen .server-grid {

    width: 100vw !important;

    height:
        calc(100vh - 42px) !important;
}


/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1600px) {

    body.wall-mode .server-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(320px, 1fr)
            ) !important;

        gap: 22px !important;

        padding: 24px !important;
    }
}


/* =========================================================
   4K
========================================================= */

@media (min-width: 2400px) {

    body.wall-mode .server-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(400px, 1fr)
            ) !important;

        gap: 28px !important;

        padding: 30px !important;
    }
}


/* =========================================================
   RESPONSIVE - DESKTOP
========================================================= */

@media (max-width: 1400px) {

    .server-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .summary {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   CHART TABLET
========================================================= */

@media (max-width: 1024px) {

    #chartModal .modal-body,
    #ramModal .modal-body,
    #cpuModal .modal-body,
    #loadChartModal .modal-body {

        height: 400px !important;

        min-height: 400px !important;
    }

    #chartModal .chart-container,
    #ramModal .chart-container,
    #cpuModal .chart-container,
    #loadChartModal .chart-container {

        height: 400px !important;

        min-height: 400px !important;
    }

    #diskChart,
    #ramChartCanvas,
    #cpuChartCanvas,
    #loadChartCanvas {

        height: 400px !important;

        min-height: 400px !important;

        max-height: 400px !important;
    }
}


/* =========================================================
   TABLET WALL
========================================================= */

@media (max-width: 1200px) {

    body.wall-mode .server-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(240px, 1fr)
            ) !important;
    }

    .top-server-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    :root {
        --alert-height: 42px;
    }

    .container {

        width: 100%;

        padding: 15px;
    }

    .header {

        flex-direction: column;

        align-items: flex-start;
    }

    .header-right,
    .header-buttons {

        width: 100%;

        flex-wrap: wrap;
    }

    .search-box,
    .refresh-select,
    .header-buttons .btn {

        flex: 1;

        min-width: 0;

        width: 100%;
    }

    .summary {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .server-grid {

        grid-template-columns: 1fr;
    }

    .circle-area {

        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;
    }

    .circle-item {

        width: 48%;
    }

    .circle {

        --size: 72px;
    }

    .circle::after {

        inset: 10px;
    }

    .circle span {

        font-size: 15px;
    }

    .load-avg .load-value {

        font-size: 20px;
    }

    .card-footer {

        flex-direction: column;
    }

    .card-footer a,
    .card-footer button {

        width: 100%;
    }


    /* -----------------------------------------
       CHART MOBILE
    ----------------------------------------- */

    #chartModal .modal-body,
    #ramModal .modal-body,
    #cpuModal .modal-body,
    #loadChartModal .modal-body {

        height: 350px !important;

        min-height: 350px !important;
    }

    #chartModal .chart-container,
    #ramModal .chart-container,
    #cpuModal .chart-container,
    #loadChartModal .chart-container {

        height: 350px !important;

        min-height: 350px !important;
    }

    #diskChart,
    #ramChartCanvas,
    #cpuChartCanvas,
    #loadChartCanvas {

        height: 350px !important;

        min-height: 350px !important;

        max-height: 350px !important;
    }


    /* -----------------------------------------
       MODAL
    ----------------------------------------- */

    .modal {

        padding: 10px;
    }

    .modal-content {

        width: 95%;

        margin: 20px auto;

        padding: 15px;
    }


    /* -----------------------------------------
       TOP WALL
    ----------------------------------------- */

    .top-wall {

        padding: 12px;
    }

    .top-wall-header {

        flex-direction: column;

        align-items: flex-start;
    }

    .top-wall-actions {

        width: 100%;
    }

    .top-wall-actions .btn {

        flex: 1;
    }

    .top-server-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       ALERT
    ----------------------------------------- */

    #alertTicker {

        height: 42px !important;
    }

    #alertMessages {

        height: 42px;
    }

    #alertMessages .alert-item {

        padding: 0 18px;

        font-size: 12px;
    }

    .alert-title {

        padding: 0 12px;

        font-size: 11px;
    }


    /* -----------------------------------------
       WALL MOBILE
    ----------------------------------------- */

    body.wall-mode .server-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(200px, 1fr)
            ) !important;

        gap: 5px !important;

        padding: 5px !important;
    }

    body.wall-mode .server-card {

        padding: 6px !important;
    }

    body.wall-mode .card-footer {

        gap: 3px !important;
    }

    body.wall-mode .card-footer button,
    body.wall-mode .card-footer a {

        font-size: 7px !important;

        padding: 4px 2px !important;
    }

    body.wall-mode .circle {

        width:
            clamp(
                45px,
                12vw,
                70px
            ) !important;

        height:
            clamp(
                45px,
                12vw,
                70px
            ) !important;
    }

    body.wall-mode .circle span {

        font-size: 11px !important;
    }

    body.wall-mode .circle-item h4 {

        font-size: 8px !important;
    }

    body.wall-mode .circle-item small {

        font-size: 7px !important;
    }

    body.wall-mode .alert-item {

        font-size: 10px !important;
    }

    body.wall-mode #alertTicker {

        height: 42px !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    :root {
        --alert-height: 40px;
    }

    .summary {

        grid-template-columns: 1fr;
    }

    .header h1 {

        font-size: 23px;
    }

    .circle-area {

        gap: 10px;
    }

    .circle {

        --size: 65px;
    }


    /* -----------------------------------------
       SMALL MOBILE CHART
    ----------------------------------------- */

    #chartModal .modal-body,
    #ramModal .modal-body,
    #cpuModal .modal-body,
    #loadChartModal .modal-body {

        height: 300px !important;

        min-height: 300px !important;
    }

    #chartModal .chart-container,
    #ramModal .chart-container,
    #cpuModal .chart-container,
    #loadChartModal .chart-container {

        height: 300px !important;

        min-height: 300px !important;
    }

    #diskChart,
    #ramChartCanvas,
    #cpuChartCanvas,
    #loadChartCanvas {

        height: 300px !important;

        min-height: 300px !important;

        max-height: 300px !important;
    }


    /* -----------------------------------------
       ALERT
    ----------------------------------------- */

    #alertTicker {

        height: 40px !important;
    }

    #alertMessages {

        height: 40px;
    }

    #alertMessages .alert-item {

        padding: 0 12px;

        font-size: 11px;
    }

    .alert-title {

        padding: 0 10px;

        font-size: 10px;
    }


    /* -----------------------------------------
       WALL SMALL MOBILE
    ----------------------------------------- */

    body.wall-mode .server-grid {

        grid-template-columns:
            1fr !important;

        gap: 4px !important;

        padding: 4px !important;
    }

    body.wall-mode .server-card {

        padding: 5px !important;
    }

    body.wall-mode .circle {

        width: 45px !important;

        height: 45px !important;
    }

    body.wall-mode .circle::after {

        inset: 7px !important;
    }

    body.wall-mode .circle span {

        font-size: 9px !important;
    }

    body.wall-mode .circle-item h4 {

        font-size: 7px !important;
    }

    body.wall-mode .circle-item small {

        font-size: 6px !important;
    }

    body.wall-mode .card-footer button,
    body.wall-mode .card-footer a {

        font-size: 6px !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}