/* ==========================================================================
   NEXUS EDGE — FRONTEND WIDGETS FE
   Widgets compartilhados renderizados no frontend.
   ========================================================================== */

/* Gauge ------------------------------------------------------------------ */

.fe-gauge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(132px, auto);
    gap: clamp(14px, 1.1vw, 20px);
    min-width: 0;
    margin-top: clamp(14px, 1.1vw, 20px);
}

.fe-gauge-card {
    --fe-gauge-track: color-mix(
        in srgb,
        var(--fe-text-muted, #687386) 17%,
        transparent
    );
    --fe-gauge-color: var(--fe-success, #3b956d);
    --fe-gauge-surface: var(--fe-surface, #eef2f6);
    --fe-gauge-inner-shadow-dark: rgba(128, 143, 164, .22);
    --fe-gauge-inner-shadow-light: rgba(255, 255, 255, .72);

    display: grid;
    grid-template-columns: var(--fe-gauge-size, 92px) minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: clamp(.9rem, 1.2vw, 1.3rem);
    width: 100%;
    min-width: 0;
    min-height: 132px;
    margin: 0;
    padding: 1rem 1.2rem;
    overflow: hidden;
    border: 1px solid var(
        --fe-border-soft,
        rgba(103, 119, 142, .13)
    );
    border-radius: var(--fe-radius-lg, 18px);
    background: var(--fe-gauge-surface);
    color: var(--fe-text, #263244);
    box-shadow:
        7px 7px 16px rgba(142, 157, 179, .18),
        -7px -7px 16px rgba(255, 255, 255, .68);
}

.fe-gauge-meter {
    position: relative;
    width: var(--fe-gauge-size, 92px);
    height: var(--fe-gauge-size, 92px);
    overflow: hidden;
    flex: 0 0 var(--fe-gauge-size, 92px);
    text-align: center;
}

.fe-gauge-meter canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    max-width: 100%;
    height: auto;
}

.fe-gauge-meter > span,
.fe-gauge-meter > b {
    position: absolute;
    z-index: 2;
    display: inline-block;
    width: 54%;
    margin: 0 23%;
    overflow: hidden;
    color: var(--fe-text, #263244) !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-gauge-meter[data-style="Semi"] > b { width: 80%; margin-inline: 10%; }
.fe-gauge-meter[data-showvalue="0"] > span { display: none; }

html[data-fe-theme="dark"] .fe-gauge-card {
    --fe-gauge-track: rgba(255, 255, 255, .11);
    --fe-gauge-surface: var(--fe-surface, #1d232d);
    --fe-gauge-inner-shadow-dark: rgba(0, 0, 0, .48);
    --fe-gauge-inner-shadow-light: rgba(255, 255, 255, .025);

    border-color: rgba(255, 255, 255, .065);
    box-shadow:
        8px 8px 18px rgba(0, 0, 0, .34),
        -2px -2px 7px rgba(255, 255, 255, .018);
}

.fe-gauge-card--danger-high {
    --fe-gauge-color: var(--fe-danger, #bf3646);
}

.fe-gauge-card--neutral {
    --fe-gauge-color: var(--fe-accent, #5b78dd);
}

.fe-gauge {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    justify-self: center;
    overflow: hidden;
    border-radius: 50%;
    background:
        conic-gradient(
            from 225deg,
            var(--fe-gauge-color)
                calc(var(--fe-gauge-value) * .75),
            var(--fe-gauge-track) 0 75%,
            transparent 75%
        );
}

.fe-gauge::before {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: var(--fe-gauge-surface);
    box-shadow:
        inset 3px 3px 8px
            var(--fe-gauge-inner-shadow-dark),
        inset -3px -3px 8px
            var(--fe-gauge-inner-shadow-light);
    content: "";
}

.fe-gauge::after {
    position: absolute;
    right: 19%;
    bottom: -1px;
    left: 19%;
    height: 38%;
    background: var(--fe-gauge-surface);
    content: "";
}

.fe-gauge > span {
    position: relative;
    z-index: 2;
    width: 4px;
    height: 34px;
    border-radius: 999px;
    background: var(--fe-gauge-color);
    box-shadow: 0 0 7px color-mix(
        in srgb,
        var(--fe-gauge-color) 32%,
        transparent
    );
    transform:
        translateY(7px)
        rotate(
            calc(
                -135deg
                + (
                    var(--fe-gauge-value)
                    * 2.7deg
                )
            )
        );
    transform-origin: 50% 29px;
}

.fe-gauge-card__meta {
    display: grid;
    min-width: 0;
    align-content: center;
    justify-items: start;
}

.fe-gauge-card__label,
.fe-gauge-card__hint {
    max-width: 100%;
    overflow: hidden;
    color: var(--fe-text-muted, #687386);
}

.fe-gauge-card__label {
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.fe-gauge-card__value {
    max-width: 100%;
    margin: .25rem 0 .2rem;
    overflow: hidden;
    color: var(--fe-gauge-color);
    font-size: clamp(1.75rem, 2.2vw, 2.45rem);
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-gauge-card__hint {
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-gauge-card--text-below {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: .35rem;
}

.fe-gauge-card--text-below .fe-gauge-card__meta {
    justify-items: center;
    text-align: center;
}

.fe-gauge-card--text-below.fe-gauge-card--meter-semi .fe-gauge-meter { height:calc(var(--fe-gauge-size,92px) * .68); }
.fe-gauge-card--text-below.fe-gauge-card--meter-arch .fe-gauge-meter { height:calc(var(--fe-gauge-size,92px) * .58); }

.fe-gauge-card--text-inside {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.fe-gauge-card--text-inside .fe-gauge-card__meta {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: min(76%, calc(var(--fe-gauge-size, 92px) * .76));
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    justify-items: center;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: normal;
}

.fe-gauge-card--text-inside.fe-gauge-card--meter-semi .fe-gauge-card__meta { top: 55%; }
.fe-gauge-card--text-inside.fe-gauge-card--meter-arch .fe-gauge-card__meta { top: 62%; }
.fe-gauge-card--text-inside .fe-gauge-card__label { font-size: clamp(.58rem, calc(var(--fe-gauge-size, 92px) * .065), .78rem); }
.fe-gauge-card--text-inside .fe-gauge-card__value { margin:.08em 0;font-size:clamp(1rem,calc(var(--fe-gauge-size,92px) * .18),2.25rem); }
.fe-gauge-card--text-inside .fe-gauge-card__hint { font-size:clamp(.52rem,calc(var(--fe-gauge-size,92px) * .055),.7rem); }

.fe-gauge-card--text-inside .fe-gauge-meter > span,
.fe-gauge-card--text-inside .fe-gauge-meter > b {
    color: var(--fe-monitor-widget-color, var(--fe-text, #263244)) !important;
}

@media (max-width: 1050px) {
    .fe-gauge-card {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .fe-gauge {
        width: 78px;
        height: 78px;
    }
}

@media (max-width: 760px) {
    .fe-gauge-grid {
        grid-template-columns: 1fr;
    }

    .fe-gauge-card {
        grid-template-columns: 78px minmax(0, 1fr);
        min-height: 118px;
    }

    .fe-gauge {
        width: 74px;
        height: 74px;
    }
}

/* Alerts ----------------------------------------------------------------- */

.fe-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--fe-border-soft);
    border-inline-start-width: 4px;
    border-radius: var(--fe-radius-md, 14px);
    background: var(--fe-surface, #eef2f6);
    color: var(--fe-text, #263244);
    box-shadow:
        5px 5px 12px var(
            --fe-shadow-dark,
            rgba(142, 157, 179, .14)
        ),
        -5px -5px 12px var(
            --fe-shadow-light,
            rgba(255, 255, 255, .65)
        );
}

.fe-alert--success {
    border-inline-start-color: var(--fe-success, #3b956d);
}

.fe-alert--warning {
    border-inline-start-color: var(--fe-warning, #c08a22);
}

.fe-alert--danger {
    border-inline-start-color: var(--fe-danger, #bf3646);
}

.fe-alert--info {
    border-inline-start-color: var(--fe-accent, #5b78dd);
}

.fe-alert__body {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
}

.fe-alert__content {
    min-width: 0;
}

.fe-alert__close {
    display: grid;
    place-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fe-text-muted, #687386);
}

/* Grid ------------------------------------------------------------------- */

.fe-grid {
    min-width: 0;
}

.fe-grid__summary {
    margin-bottom: .8rem;
    color: var(--fe-text-muted, #687386);
    font-size: .74rem;
}

.fe-grid__footer {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.fe-grid__empty {
    padding: 1.5rem !important;
}

.fe-table__row--critical > * {
    background: color-mix(
        in srgb,
        var(--fe-danger, #bf3646) 8%,
        transparent
    ) !important;
}

/* Status ----------------------------------------------------------------- */

.fe-status-dot {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

/* Action summary --------------------------------------------------------- */

.fe-action-summary {
    padding: 1rem;
    border-radius: var(--fe-radius-lg, 18px);
    background: var(--fe-surface-subtle, rgba(120, 130, 145, .06));
}

/* Timeline --------------------------------------------------------------- */

.fe-timeline {
    display: grid;
    gap: .75rem;
}

.fe-timeline__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--fe-radius-md, 14px);
    background: var(--fe-surface-subtle, rgba(120, 130, 145, .06));
}

.fe-timeline__content {
    display: grid;
    min-width: 0;
}

.fe-timeline__title {
    font-weight: 600;
}

.fe-timeline__description,
.fe-timeline__time {
    color: var(--fe-text-muted, #687386);
    font-size: .74rem;
}

.fe-timeline__meta {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 0 0 auto;
}

/* Wizard ----------------------------------------------------------------- */

.fe-wizard-steps {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fe-wizard-steps__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem .65rem;
    align-items: center;
    padding: .85rem;
    border-radius: var(--fe-radius-md, 14px);
    background: var(--fe-surface-subtle, rgba(120, 130, 145, .06));
}

.fe-wizard-steps__number {
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    grid-row: 1 / span 2;
    border-radius: 50%;
    background: color-mix(
        in srgb,
        var(--fe-accent, #5b78dd) 12%,
        transparent
    );
    color: var(--fe-accent-strong, #4164b0);
    font-size: .72rem;
    font-weight: 600;
}

.fe-wizard-steps__item small {
    color: var(--fe-text-muted, #687386);
}

.fe-wizard-steps__item--done
.fe-wizard-steps__number,
.fe-wizard-steps__item--complete
.fe-wizard-steps__number,
.fe-wizard-steps__item--completed
.fe-wizard-steps__number {
    background: color-mix(
        in srgb,
        var(--fe-success, #3b956d) 15%,
        transparent
    );
    color: var(--fe-success, #3b956d);
}

@media (max-width: 760px) {
    .fe-gauge-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .fe-timeline__item {
        flex-direction: column;
    }

    .fe-timeline__meta {
        width: 100%;
        justify-content: space-between;
    }
}