/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-waygxlchcw],
.components-reconnect-repeated-attempt-visible[b-waygxlchcw],
.components-reconnect-failed-visible[b-waygxlchcw],
.components-pause-visible[b-waygxlchcw],
.components-resume-failed-visible[b-waygxlchcw],
.components-rejoining-animation[b-waygxlchcw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-retrying[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-failed[b-waygxlchcw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-waygxlchcw] {
    display: block;
}


#components-reconnect-modal[b-waygxlchcw] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-waygxlchcw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-waygxlchcw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-waygxlchcw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-waygxlchcw]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-waygxlchcw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-waygxlchcw {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-waygxlchcw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-waygxlchcw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-waygxlchcw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-waygxlchcw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-waygxlchcw] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-waygxlchcw] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-waygxlchcw] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-waygxlchcw] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-waygxlchcw] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-waygxlchcw 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-waygxlchcw] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-waygxlchcw {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Demand/DemandTab.razor.rz.scp.css */
/* Demand tab layout. BlazorKit components bring their own styles; these only place them. */

.dm-root[b-4smsxh7fxf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dm-scopebar[b-4smsxh7fxf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dm-scope[b-4smsxh7fxf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.dm-scope-path[b-4smsxh7fxf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--uuc-color-text, #0f172a);
}

.dm-scope-range[b-4smsxh7fxf] {
    font-size: 12px;
    color: var(--uuc-color-text-secondary, #64748b);
}

.dm-loading[b-4smsxh7fxf] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    font-size: 12px;
    color: #64748b;
}

.dm-muted[b-4smsxh7fxf] {
    color: var(--uuc-color-text-secondary, #64748b);
    font-size: 12px;
}

/* ---------- KPI tiles: 5 per row (BlazorKit's KpiCardGroup has no 5-column style) ----------
   Steps down by the width of the Demand area itself (container query), not the browser window,
   so the tree, menu and browser zoom don't drop it to fewer columns too early. */
.dm-root[b-4smsxh7fxf] {
    container-type: inline-size;
}

.dm-root[b-4smsxh7fxf]  .dm-kpis-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Title, value and sub-line stacked from the top, as on the sample page. BlazorKit spreads them over the card
   (space-between), so in a row stretched to its tallest tile the value of a tile without a sub-line sank down. */
.dm-root[b-4smsxh7fxf]  .dm-kpis-5 .uuc-kpi-card {
    justify-content: flex-start;
}

.dm-root[b-4smsxh7fxf]  .dm-kpis-5 .uuc-kpi-header {
    margin-bottom: 6px;
}

.dm-root[b-4smsxh7fxf]  .dm-kpis-5 .uuc-kpi-body {
    margin-bottom: 4px;
}

.dm-root[b-4smsxh7fxf]  .dm-kpis-5 .uuc-kpi-meta {
    margin-top: 0;
}

.dm-root[b-4smsxh7fxf]  .dm-kpis-5 .uuc-kpi-subtitle {
    font-size: 12px;
}

@container (max-width: 760px) {
    .dm-root[b-4smsxh7fxf]  .dm-kpis-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (max-width: 520px) {
    .dm-root[b-4smsxh7fxf]  .dm-kpis-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 340px) {
    .dm-root[b-4smsxh7fxf]  .dm-kpis-5 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dm-row[b-4smsxh7fxf] {
    display: grid;
    gap: 12px;
    min-width: 0;
}

    /* the cards are BlazorKit elements, so ::deep reaches them; grid items stretch, so cards in one row share a height */
    .dm-row[b-4smsxh7fxf]  > * {
        min-width: 0;
        height: 100%;
    }

.dm-row-wide[b-4smsxh7fxf] {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

.dm-row-half[b-4smsxh7fxf] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .dm-row-wide[b-4smsxh7fxf],
    .dm-row-half[b-4smsxh7fxf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- What stands out ---------- */
.dm-insights[b-4smsxh7fxf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* as on the sample page: the kind runs inline before the text, every finding shown (no inner scroll) */
.dm-insight[b-4smsxh7fxf] {
    font-size: 12.5px;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f8fafc;
}

    .dm-insight.dm-click[b-4smsxh7fxf] {
        cursor: pointer;
    }

        .dm-insight.dm-click:hover[b-4smsxh7fxf] {
            background: #eef4ff;
        }

.dm-insight-kind[b-4smsxh7fxf] {
    font-family: var(--uuc-font-code, Consolas, monospace);
    font-size: 11px;
    color: #64748b;
    margin-right: 6px;
}

/* ---------- Bars inside table cells (By weekday, Meters by daily use) ---------- */
.dm-bar[b-4smsxh7fxf] {
    display: inline-block;
    vertical-align: middle;
    height: 10px;
    min-width: 0;
    border-radius: 3px;
    background: #1783FF;
}

.dm-bar-2[b-4smsxh7fxf] {
    background: #00C9C9;
}

/* bar + percentage on one line: the bar gives way, the number never wraps under it */
.dm-share[b-4smsxh7fxf] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .dm-share .dm-bar[b-4smsxh7fxf] {
        flex: 0 1 auto;
    }

    .dm-share > span:last-child[b-4smsxh7fxf] {
        flex: none;
    }

/* ---------- Heatmap ---------- */
.dm-facts[b-4smsxh7fxf] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 10px;
}

.dm-heat[b-4smsxh7fxf] {
    display: grid;
    grid-template-columns: 56px repeat(24, minmax(0, 1fr));
    gap: 2px;
    font-size: 10px;
}

.dm-heat-hour[b-4smsxh7fxf] {
    text-align: center;
    color: #94a3b8;
}

.dm-heat-day[b-4smsxh7fxf] {
    color: #64748b;
    white-space: nowrap;
    line-height: 14px;
}

.dm-heat-cell[b-4smsxh7fxf] {
    height: 14px;
    border-radius: 2px;
}

.dm-heat-peak[b-4smsxh7fxf] {
    outline: 2px solid #F0884D;
    outline-offset: -1px;
}

/* ---------- Tables ---------- */
[b-4smsxh7fxf] .dm-row-click {
    cursor: pointer;
}

/* ---------- Table pagination (BlazorKit) ----------
   Smaller than BlazorKit's default (32px, 13px) to suit the cards, and it wraps instead of overlapping when a card
   is narrow: BlazorKit only stacks it below a 768px window, which a half-width card never reaches. */
.dm-root[b-4smsxh7fxf]  .uuc-table-pagination {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 2px 2px;
    font-size: 12px;
}

.dm-root[b-4smsxh7fxf]  .uuc-pagination-zone {
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 6px;
}

.dm-root[b-4smsxh7fxf]  .uuc-pagination-zone:empty {
    display: none;
}

.dm-root[b-4smsxh7fxf]  .uuc-table-pagination-total,
.dm-root[b-4smsxh7fxf]  .uuc-table-pagesize-label {
    font-size: 12px;
}

.dm-root[b-4smsxh7fxf]  .uuc-table-pagination-controls {
    flex-wrap: wrap;
    gap: 4px;
}

.dm-root[b-4smsxh7fxf]  .uuc-pagination-btn,
.dm-root[b-4smsxh7fxf]  .uuc-pagination-item {
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 5px;
}

.dm-root[b-4smsxh7fxf]  .uuc-table-pagesize-select {
    height: 26px;
    min-width: 52px;
    padding: 0 6px;
    font-size: 12px;
    border-radius: 5px;
}

/* each table is its own container, so the rule below goes by the table's width (half or full row), not the page's */
.dm-root[b-4smsxh7fxf]  .uuc-table-wrapper {
    container-type: inline-size;
}

/* narrow tables: "Showing …" on its own line, pages and page size centred under it */
@container (max-width: 760px) {
    .dm-root[b-4smsxh7fxf]  .uuc-table-pagination {
        justify-content: center;
    }

    .dm-root[b-4smsxh7fxf]  .uuc-pagination-zone {
        justify-content: center !important;
    }
}