/*
 * ============================================================
 * BLOODMOON GRID
 * Homepage Bottom Dashboard
 * ============================================================
 *
 * Version : 2026-09-07 13:20
 */


/* ============================================================
   THREE COLUMN DASHBOARD
============================================================ */

.home-dashboard {

    display: grid;

    grid-template-columns:
        0.95fr
        1.25fr
        0.95fr;

    gap: 12px;

    margin-top: 0;

    padding-bottom: 14px;

}


/* ============================================================
   COMMON PANEL
============================================================ */

.dashboard-panel {

    min-width: 0;

    overflow: hidden;

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

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 3px 14px rgba(27, 37, 50, 0.05);

}


.dashboard-heading {

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding:
        0
        12px;

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

}


.dashboard-title {

    display: flex;

    align-items: center;

    gap: 8px;

}


.dashboard-title h2 {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1;

}


.dashboard-icon {

    width: 26px;

    height: 26px;

    flex: 0 0 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    font-size: 0.78rem;

    font-weight: 800;

}


.dashboard-count {

    color: var(--text-light);

    font-size: 0.63rem;

    font-weight: 700;

}


/* ============================================================
   REGION LIST
============================================================ */

.region-panel .dashboard-icon {

    background: #fff0f1;

    color: var(--bloodmoon);

}


.region-list {

    height: 175px;

    overflow-y: auto;

}


.region-row {

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 27px;

    padding:
        4px
        10px;

    border-bottom:
        1px solid
        #f0f2f4;

    color: inherit;

    text-decoration: none;

    transition:
        background 0.15s ease;

}


.region-row:hover {

    background: #f7f9fb;

}


.region-name {

    overflow: hidden;

    color: #30363d;

    font-size: 0.71rem;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.region-coordinates {

    display: flex;

    gap: 4px;

}


.region-coordinate {

    min-width: 34px;

    padding:
        2px
        5px;

    border-radius: 999px;

    background: #f0f3f6;

    color: #6b737d;

    font-size: 0.59rem;

    font-weight: 700;

    text-align: center;

}


/* ============================================================
   NEWS / ANNOUNCEMENTS
============================================================ */

.news-panel .dashboard-icon {

    background: #fff0f1;

    color: var(--bloodmoon);

}


.news-list {

    height: 175px;

    overflow-y: auto;

    padding: 7px;

}


.news-item {

    position: relative;

    margin-bottom: 6px;

    padding:
        7px
        9px
        7px
        13px;

    overflow: hidden;

    border:
        1px solid
        #edf0f3;

    border-radius: 8px;

    background: #fafbfc;

}


.news-item:last-child {

    margin-bottom: 0;

}


.news-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    width: 3px;

    background: #3978c5;

}


.news-success::before {

    background: #299965;

}


.news-warning::before {

    background: #dd8a17;

}


.news-important::before {

    background: var(--bloodmoon);

}


.news-topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.news-badge {

    color: var(--bloodmoon);

    font-size: 0.53rem;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.news-date {

    flex-shrink: 0;

    color: #9299a2;

    font-size: 0.56rem;

}


.news-item h3 {

    margin:
        2px
        0;

    color: #30363d;

    font-size: 0.74rem;

}


.news-item p {

    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    color: #69717a;

    font-size: 0.64rem;

    line-height: 1.35;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

}


.news-more {

    display: inline-block;

    margin-top: 4px;

    color: var(--bloodmoon);

    text-decoration: none;

    font-size: 0.6rem;

    font-weight: 700;

}


.news-more:hover {

    text-decoration: underline;

}


/* ============================================================
   GRID STATUS
============================================================ */

.status-panel .dashboard-icon {

    background: #edf9f3;

    color: #299965;

}


.grid-online {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        4px
        7px;

    border-radius: 999px;

    background: #e9f9ef;

    color: #239156;

    font-size: 0.56rem;

    font-weight: 800;

}


.grid-offline {

    background: #fff0f1;

    color: var(--bloodmoon);

}


.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: currentColor;

}


.stats-grid {

    display: grid;

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

    gap: 6px;

    padding: 8px;

}


.stat-card {

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        5px
        7px;

    border:
        1px solid
        #edf0f3;

    border-radius: 8px;

    background: #fafbfc;

}


.stat-icon {

    width: 26px;

    height: 26px;

    flex:
        0 0
        26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #eef5ff;

    color: #3978c5;

    font-size: 0.61rem;

    font-weight: 800;

}


.stat-content {

    min-width: 0;

}


.stat-label {

    display: block;

    overflow: hidden;

    color: #7b838d;

    font-size: 0.55rem;

    line-height: 1.1;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.stat-value {

    display: block;

    margin-top: 1px;

    color: #252b31;

    font-size: 0.84rem;

    font-weight: 800;

}


/* ============================================================
   EMPTY STATE
============================================================ */

.dashboard-empty {

    padding:
        28px
        15px;

    color: #8b929b;

    font-size: 0.7rem;

    text-align: center;

}


/* ============================================================
   SCROLLBARS
============================================================ */

.region-list::-webkit-scrollbar,
.news-list::-webkit-scrollbar {

    width: 6px;

}


.region-list::-webkit-scrollbar-track,
.news-list::-webkit-scrollbar-track {

    background: transparent;

}


.region-list::-webkit-scrollbar-thumb,
.news-list::-webkit-scrollbar-thumb {

    border-radius: 999px;

    background: #d7dce2;

}


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

@media (max-width: 1050px) {

    .home-dashboard {

        grid-template-columns:
            1fr
            1fr;

    }


    .status-panel {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 700px) {

    .home-dashboard {

        grid-template-columns:
            1fr;

    }


    .status-panel {

        grid-column:
            auto;

    }


    .region-list,
    .news-list {

        height: 165px;

    }

}