/* =========================================================
   OBSERVER — CUSTOM DASHBOARD RUNTIME — PHASE 2
   ========================================================= */

.observer-custom-dashboard {
    --custom-panel: rgba(22, 27, 36, .96);
    --custom-card: rgba(24, 30, 39, .98);
    --custom-border: rgba(255, 255, 255, .08);
    --custom-text: #f2f4f7;
    --custom-muted: #9098a5;
    --custom-subtle: #68717d;
    --custom-accent: #8b4cff;
    --custom-row: 28px;
    --custom-gap: 10px;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px;
    color: var(--custom-text);
}

.observer-custom-dashboard * {
    box-sizing: border-box;
}

.observer-custom-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.observer-custom-dashboard-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
}

.observer-custom-dashboard-heading > div:last-child {
    min-width: 0;
}

.observer-custom-dashboard-back,
.observer-custom-dashboard-edit,
.observer-custom-dashboard-tv {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--custom-border);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: var(--custom-muted);
    padding: 0 11px;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.observer-custom-dashboard-back {
    width: 36px;
    flex: 0 0 auto;
    padding: 0;
}

.observer-custom-dashboard-edit {
    border-color: rgba(139,76,255,.27);
    background: rgba(139,76,255,.09);
    color: #c1a7f7;
}

.observer-custom-dashboard-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.observer-custom-dashboard-tv {
    border-color: rgba(77, 176, 255, .24);
    background: rgba(77, 176, 255, .075);
    color: #8dcbff;
}

.observer-custom-dashboard-tv:hover {
    border-color: rgba(77, 176, 255, .42);
    background: rgba(77, 176, 255, .12);
}

.observer-custom-dashboard-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #a87bff;
    font-size: 9px;
    font-weight: 730;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.observer-custom-dashboard h1 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 680;
}

.observer-custom-dashboard-description {
    margin: 5px 0 0;
    color: var(--custom-muted);
    font-size: 11px;
    line-height: 1.5;
}

.observer-custom-dashboard-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--custom-border);
    border-radius: 10px;
    background: var(--custom-panel);
}

.observer-custom-dashboard-toolbar-left,
.observer-custom-dashboard-toolbar-right {
    display: flex;
    min-width: 0;
    align-items: end;
    gap: 10px;
}

.observer-custom-dashboard-toolbar-left {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.observer-custom-dashboard-toolbar-right {
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-left: auto;
}

.observer-custom-dashboard-toolbar label {
    display: grid;
    min-width: 170px;
    gap: 5px;
}

.observer-custom-dashboard-toolbar label > span {
    color: var(--custom-subtle);
    font-size: 8px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.observer-custom-dashboard-toolbar select {
    min-height: 34px;
    border: 1px solid var(--custom-border);
    border-radius: 7px;
    background: rgba(8,12,18,.45);
    color: var(--custom-text);
    padding: 0 9px;
    font: inherit;
    font-size: 10px;
    outline: none;
}

.observer-custom-dashboard-toolbar select:focus {
    border-color: rgba(139,76,255,.5);
}

.observer-custom-dashboard-refresh-state {
    min-width: max-content;
    align-self: center;
    margin-left: 4px;
    color: var(--custom-subtle);
    font-size: 9px;
    text-align: right;
}

.observer-custom-dashboard-error {
    display: none;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 95, 110, .2);
    border-radius: 8px;
    background: rgba(255, 95, 110, .07);
    padding: 10px 12px;
    color: #ff9da6;
    font-size: 10px;
}

.observer-custom-dashboard-error[data-visible="1"] {
    display: block;
}

.observer-custom-dashboard-grid {
    display: grid;
    min-height: 456px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--custom-row);
    gap: var(--custom-gap);
    align-content: start;
}

.observer-custom-dashboard-widget {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border: 1px solid var(--custom-border);
    border-radius: 10px;
    background: var(--custom-card);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;

    /*
     * Container responsivo do próprio widget.
     * Deve existir em desktop e mobile.
     */
    container-type: size;
    container-name: observer-custom-widget;
}

.observer-custom-dashboard-widget-header {
    display: flex;
    min-height: 37px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    padding: 0 11px;
}

.observer-custom-dashboard-widget-header strong {
    min-width: 0;
    overflow: hidden;
    color: #f0f2f5;
    font-size: 10px;
    font-weight: 630;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observer-custom-dashboard-widget-source {
    flex: 0 0 auto;
    max-width: 45%;
    overflow: hidden;
    color: var(--custom-subtle);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observer-custom-dashboard-widget-body {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.observer-custom-dashboard-widget-chart {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 80px;
}

.observer-custom-dashboard-widget-number {
    display: grid;
    width: 100%;
    gap: 7px;
    text-align: center;
}

.observer-custom-dashboard-widget-number strong {
    color: #fff;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 690;
    line-height: 1;
}

.observer-custom-dashboard-widget-number span {
    color: var(--custom-muted);
    font-size: 9px;
}

.observer-custom-dashboard-widget-state {
    display: grid;
    max-width: 250px;
    gap: 7px;
    color: var(--custom-subtle);
    font-size: 9px;
    line-height: 1.45;
    text-align: center;
}

.observer-custom-dashboard-widget-state i {
    color: rgba(168,123,255,.65);
    font-size: 21px;
}


.observer-custom-dashboard-empty[hidden] {
    display: none !important;
}

.observer-custom-dashboard-empty {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed rgba(139,76,255,.23);
    border-radius: 11px;
    background: rgba(139,76,255,.03);
    color: var(--custom-subtle);
    text-align: center;
}

.observer-custom-dashboard-empty i {
    color: rgba(168,123,255,.65);
    font-size: 28px;
}

.observer-custom-dashboard-empty strong {
    color: var(--custom-muted);
    font-size: 12px;
}

.observer-custom-dashboard-empty span {
    max-width: 440px;
    font-size: 10px;
}

@media (max-width: 760px) {
    .observer-custom-dashboard {
        padding: 14px;
    }

    .observer-custom-dashboard-header {
        flex-direction: column;
    }

    .observer-custom-dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .observer-custom-dashboard-toolbar-left,
    .observer-custom-dashboard-toolbar-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
    }

    .observer-custom-dashboard-toolbar label {
        min-width: calc(50% - 5px);
        flex: 1 1 160px;
    }

    .observer-custom-dashboard-refresh-state {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .observer-custom-dashboard-grid {
        display: block;
    }


.observer-custom-dashboard-widget[data-widget-type="number"] {
        min-height: 150px;
    }
}



/*
|--------------------------------------------------------------------------
| Widget border by threshold state — Phase 3.18
|--------------------------------------------------------------------------
|
| Sem threshold aplicável:
|   mantém a borda padrão/configurada do widget.
|
| Com threshold:
|   OK       = borda padrão
|   WARNING  = laranja suave
|   CRITICAL = vermelho suave
|
| Em widgets com múltiplas métricas/linhas, a ordem das regras faz o pior
| estado vencer. O !important é intencional para sobrepor uma border-color
| inline eventualmente aplicada pela cor personalizada da série.
|
*/

/*
 * Estado OK: força a borda visual padrão do card.
 * Isso também neutraliza eventual border-color inline aplicada pela cor
 * personalizada da série/métrica no Runtime.
 */
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-threshold-badge[data-threshold-state="ok"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-number[data-threshold-state="ok"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-gauge[data-threshold-state="ok"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-status[data-threshold-state="ok"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-table tr[data-threshold-state="ok"]) {
    border-color: var(--custom-border) !important;
    box-shadow: none !important;
}

.observer-custom-dashboard-widget:has(.observer-custom-dashboard-threshold-badge[data-threshold-state="warning"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-number[data-threshold-state="warning"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-gauge[data-threshold-state="warning"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-status[data-threshold-state="warning"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-table tr[data-threshold-state="warning"]) {
    border-color: color-mix(in srgb, #f59e0b 42%, rgba(255, 255, 255, .08)) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #f59e0b 11%, transparent),
        0 0 0 1px color-mix(in srgb, #f59e0b 6%, transparent);
}

.observer-custom-dashboard-widget:has(.observer-custom-dashboard-threshold-badge[data-threshold-state="critical"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-number[data-threshold-state="critical"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-gauge[data-threshold-state="critical"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-status[data-threshold-state="critical"]),
.observer-custom-dashboard-widget:has(.observer-custom-dashboard-widget-table tr[data-threshold-state="critical"]) {
    border-color: color-mix(in srgb, #ef4444 40%, rgba(255, 255, 255, .08)) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ef4444 10%, transparent),
        0 0 0 1px color-mix(in srgb, #ef4444 5%, transparent);
}

.observer-custom-dashboard-threshold-badge {
    position: absolute;
    z-index: 3;
    top: 5px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--state-color) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--state-color) 12%, rgba(8,12,18,.86));
    color: var(--state-color);
    font-size: 8px;
    font-weight: 650;
}

.observer-custom-dashboard-threshold-badge[data-threshold-state="ok"],
.observer-custom-dashboard-widget-number[data-threshold-state="ok"],
.observer-custom-dashboard-widget-gauge[data-threshold-state="ok"],
.observer-custom-dashboard-widget-status[data-threshold-state="ok"],
.observer-custom-dashboard-widget-table tr[data-threshold-state="ok"] { --state-color: #22c55e; }

.observer-custom-dashboard-threshold-badge[data-threshold-state="warning"],
.observer-custom-dashboard-widget-number[data-threshold-state="warning"],
.observer-custom-dashboard-widget-gauge[data-threshold-state="warning"],
.observer-custom-dashboard-widget-status[data-threshold-state="warning"],
.observer-custom-dashboard-widget-table tr[data-threshold-state="warning"] { --state-color: #f59e0b; }

.observer-custom-dashboard-threshold-badge[data-threshold-state="critical"],
.observer-custom-dashboard-widget-number[data-threshold-state="critical"],
.observer-custom-dashboard-widget-gauge[data-threshold-state="critical"],
.observer-custom-dashboard-widget-status[data-threshold-state="critical"],
.observer-custom-dashboard-widget-table tr[data-threshold-state="critical"] { --state-color: #ef4444; }

.observer-custom-dashboard-widget-number[data-threshold-state]:not([data-threshold-state="neutral"]) strong {
    color: var(--state-color);
}

.observer-custom-dashboard-widget-number small,
.observer-custom-dashboard-widget-status small {
    color: #8e96a2;
    font-size: 8px;
}

.observer-custom-dashboard-widget-gauge {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-content: center;
    justify-items: center;
    gap: 7px;
    --state-color: #8b5cf6;
}

.observer-custom-dashboard-widget-gauge[data-threshold-state="neutral"] { --state-color: #8b5cf6; }

.observer-custom-dashboard-gauge-ring {
    position: relative;
    display: grid;
    width: min(150px, 78%);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(14,18,25,1) 0 58%, transparent 59%),
        conic-gradient(var(--state-color) 0 var(--gauge-value), rgba(255,255,255,.07) var(--gauge-value) 100%);
}

.observer-custom-dashboard-gauge-center {
    display: grid;
    width: 100%;
    max-width: 78%;
    min-width: 0;
    gap: 3px;
    text-align: center;
}

.observer-custom-dashboard-gauge-center strong {
    color: #fff;
    font-size: clamp(18px, 2.4vw, 31px);
    line-height: 1;
}

.observer-custom-dashboard-gauge-center span,
.observer-custom-dashboard-gauge-scale {
    color: #8e96a2;
    font-size: 8px;
}

.observer-custom-dashboard-gauge-label {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.observer-custom-dashboard-gauge-scale {
    display: flex;
    width: min(160px, 82%);
    justify-content: space-between;
}

.observer-custom-dashboard-widget-status {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    --state-color: #87909d;
}

.observer-custom-dashboard-widget-status[data-threshold-state="neutral"] { --state-color: #87909d; }

.observer-custom-dashboard-widget-status > i {
    color: var(--state-color);
    font-size: clamp(28px, 4vw, 48px);
}

.observer-custom-dashboard-widget-status strong {
    color: var(--state-color);
    font-size: 13px;
}

.observer-custom-dashboard-widget-status > span {
    color: #fff;
    font-size: 18px;
    font-weight: 650;
}

.observer-custom-dashboard-widget-pie,
.observer-custom-dashboard-widget-chart {
    position: relative;
}

.observer-custom-dashboard-widget-pie {
    width: 100%;
    height: 100%;
    min-height: 80px;
}

.observer-custom-dashboard-widget-table-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 4px;
}

.observer-custom-dashboard-widget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8px;
}

.observer-custom-dashboard-widget-table th,
.observer-custom-dashboard-widget-table td {
    padding: 6px 7px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    text-align: right;
    white-space: nowrap;
}

.observer-custom-dashboard-widget-table th:first-child,
.observer-custom-dashboard-widget-table td:first-child {
    text-align: left;
}

.observer-custom-dashboard-widget-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(13,17,24,.96);
    color: #8e96a2;
    font-weight: 650;
}

.observer-custom-dashboard-widget-table td {
    color: #c9ced6;
}

.observer-custom-dashboard-widget-table tr[data-threshold-state="warning"] td:first-child,
.observer-custom-dashboard-widget-table tr[data-threshold-state="critical"] td:first-child,
.observer-custom-dashboard-widget-table tr[data-threshold-state="ok"] td:first-child {
    color: var(--state-color);
}



/* =========================================================
   PHASE 3.2 — MULTI-METRIC TABLE
   ========================================================= */

.observer-custom-dashboard-widget-table th:nth-child(1),
.observer-custom-dashboard-widget-table td:nth-child(1) {
    min-width: 115px;
}

.observer-custom-dashboard-widget-table th:nth-child(2),
.observer-custom-dashboard-widget-table td:nth-child(2) {
    min-width: 95px;
}


/*
|--------------------------------------------------------------------------
| Side legend layout — Phase 3.4
|--------------------------------------------------------------------------
*/
.observer-custom-dashboard-widget-side-legend {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
}

.observer-custom-dashboard-widget-side-legend
    > .observer-custom-dashboard-threshold-badge {
    position: static;
    justify-self: end;
    margin: 0 0 5px;
}

.observer-custom-dashboard-widget-side-legend > canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
}



/* Phase 3.7 — Uptime / Última coleta / resumo estatístico */
.observer-custom-dashboard-widget-summary-stats {
    width: 100%;
    margin-top: 7px;
    color: var(--custom-muted);
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}

.observer-custom-dashboard-widget-host-state {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    place-content: center;
    justify-items: center;
    gap: 7px;
    text-align: center;
}

.observer-custom-dashboard-widget-host-state > i {
    color: rgba(168, 123, 255, .82);
    font-size: 24px;
}

.observer-custom-dashboard-widget-host-state > strong {
    color: #fff;
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.08;
}

.observer-custom-dashboard-widget-last-collection > strong {
    font-size: clamp(16px, 2vw, 24px);
}

.observer-custom-dashboard-widget-host-state > span,
.observer-custom-dashboard-widget-host-state > small {
    color: var(--custom-muted);
    font-size: 10px;
}


/*
|--------------------------------------------------------------------------
| Semantic widget icons — Phase 3.8
|--------------------------------------------------------------------------
*/

.observer-custom-dashboard-widget-title {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
}

.observer-custom-dashboard-widget-title strong {
    min-width: 0;
    overflow: hidden;
    color: #f0f2f5;
    font-size: 10px;
    font-weight: 630;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observer-custom-dashboard-widget-metric-icon {
    display: inline-flex;
    width: 14px;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    color: rgba(168, 123, 255, .92);
    font-size: 10px;
}

/*
 * O cabeçalho passa a ser a única localização do ícone semântico
 * para Uptime e Última coleta.
 */
.observer-custom-dashboard-widget-host-state > i {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Server status widget — Phase 3.9
|--------------------------------------------------------------------------
*/

.observer-custom-dashboard-widget-server-status {
    --server-status-color: #ff6b75;
}

.observer-custom-dashboard-widget-server-status[data-server-online="1"] {
    --server-status-color: #55d98a;
}

.observer-custom-dashboard-server-status-dot {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--server-status-color) 78%, transparent);
    border-radius: 999px;
    background: var(--server-status-color);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--server-status-color) 12%, transparent);
}

.observer-custom-dashboard-widget-server-status > strong {
    color: var(--server-status-color);
    font-size: clamp(24px, 3vw, 42px);
    letter-spacing: .08em;
}


/*
|--------------------------------------------------------------------------
| Widget intrinsic responsiveness — Phase 3.10
|--------------------------------------------------------------------------
|
| O widget responde ao próprio tamanho no grid, e não ao viewport.
| Isso permite reduzir largura/altura sem quebrar o conteúdo.
|
*/

/* Base seguro para elementos visuais que antes tinham altura mínima. */
.observer-custom-dashboard-widget-chart,
.observer-custom-dashboard-widget-pie {
    min-height: 0;
}

/* Textos longos nunca devem empurrar o card. */
.observer-custom-dashboard-widget-host-state > strong,
.observer-custom-dashboard-widget-host-state > span,
.observer-custom-dashboard-widget-host-state > small,
.observer-custom-dashboard-widget-summary-stats {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.observer-custom-dashboard-widget-host-state > strong {
    white-space: nowrap;
}

.observer-custom-dashboard-widget-summary-stats {
    overflow-wrap: anywhere;
}

/*
 * Card mais estreito:
 * comprime header/body e reduz elementos de leitura principal.
 */
@container observer-custom-widget (max-width: 320px) {
    .observer-custom-dashboard-widget-header {
        min-height: 33px;
        gap: 6px;
        padding-inline: 8px;
    }

    .observer-custom-dashboard-widget-title {
        gap: 5px;
    }

    .observer-custom-dashboard-widget-source {
        max-width: 38%;
        font-size: 7px;
    }

    .observer-custom-dashboard-widget-body {
        padding: 7px;
    }

    .observer-custom-dashboard-widget-number {
        gap: 5px;
    }

    .observer-custom-dashboard-widget-number strong {
        font-size: clamp(24px, 15cqw, 42px);
    }

    .observer-custom-dashboard-widget-number span,
    .observer-custom-dashboard-widget-number small,
    .observer-custom-dashboard-widget-summary-stats {
        font-size: 8px;
    }

    .observer-custom-dashboard-widget-host-state {
        gap: 5px;
    }

    .observer-custom-dashboard-widget-host-state > strong {
        font-size: clamp(19px, 12cqw, 34px);
    }

    .observer-custom-dashboard-widget-last-collection > strong {
        font-size: clamp(11px, 7cqw, 18px);
    }

    .observer-custom-dashboard-widget-server-status > strong {
        font-size: clamp(19px, 12cqw, 32px);
        letter-spacing: .055em;
    }

    .observer-custom-dashboard-gauge-ring {
        width: min(128px, 66cqw, 66cqh);
    }

    .observer-custom-dashboard-gauge-center strong {
        font-size: clamp(16px, 9cqw, 26px);
    }

    .observer-custom-dashboard-widget-status > i {
        font-size: clamp(22px, 11cqw, 38px);
    }

    .observer-custom-dashboard-widget-status > span {
        font-size: clamp(14px, 8cqw, 18px);
    }
}

/*
 * Card realmente estreito:
 * origem é informação secundária e some antes do título.
 */
@container observer-custom-widget (max-width: 235px) {
    .observer-custom-dashboard-widget-header {
        padding-inline: 7px;
    }

    .observer-custom-dashboard-widget-source {
        display: none;
    }

    .observer-custom-dashboard-widget-title strong {
        font-size: 9px;
    }

    .observer-custom-dashboard-widget-metric-icon {
        width: 12px;
        flex-basis: 12px;
        font-size: 9px;
    }

    .observer-custom-dashboard-widget-body {
        padding: 5px;
    }

    .observer-custom-dashboard-threshold-badge {
        top: 4px;
        right: 4px;
        min-height: 18px;
        padding-inline: 5px;
        font-size: 7px;
    }

    .observer-custom-dashboard-widget-summary-stats {
        margin-top: 4px;
        font-size: 7px;
        line-height: 1.25;
    }

    .observer-custom-dashboard-server-status-dot {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--server-status-color) 12%, transparent);
    }
}

/*
 * Card baixo:
 * reduz verticalmente, mantendo valor + contexto principal.
 */
@container observer-custom-widget (max-height: 150px) {
    .observer-custom-dashboard-widget-header {
        min-height: 31px;
    }

    .observer-custom-dashboard-widget-body {
        padding-block: 5px;
    }

    .observer-custom-dashboard-widget-host-state {
        gap: 3px;
    }

    .observer-custom-dashboard-widget-host-state > strong {
        font-size: clamp(18px, 9cqh, 31px);
    }

    .observer-custom-dashboard-widget-last-collection > strong {
        font-size: clamp(11px, 6.2cqh, 17px);
    }

    .observer-custom-dashboard-widget-host-state > span,
    .observer-custom-dashboard-widget-host-state > small {
        font-size: 8px;
        line-height: 1.15;
    }

    .observer-custom-dashboard-widget-number {
        gap: 3px;
    }

    .observer-custom-dashboard-widget-number strong {
        font-size: clamp(24px, 22cqh, 42px);
    }

    .observer-custom-dashboard-widget-summary-stats {
        margin-top: 3px;
        font-size: 8px;
    }

    .observer-custom-dashboard-gauge-ring {
        width: min(118px, 60cqh, 62cqw);
    }

    .observer-custom-dashboard-gauge-scale {
        font-size: 7px;
    }

    .observer-custom-dashboard-widget-status {
        gap: 3px;
    }

    .observer-custom-dashboard-widget-status > i {
        font-size: clamp(20px, 18cqh, 34px);
    }
}

/*
 * Card muito baixo:
 * textos auxiliares são sacrificados antes de qualquer overflow.
 */
@container observer-custom-widget (max-height: 118px) {
    .observer-custom-dashboard-widget-header {
        min-height: 29px;
    }

    .observer-custom-dashboard-widget-body {
        padding: 4px 6px;
    }

    .observer-custom-dashboard-widget-host-state > small,
    .observer-custom-dashboard-widget-summary-stats,
    .observer-custom-dashboard-gauge-scale {
        display: none;
    }

    .observer-custom-dashboard-widget-host-state > span {
        font-size: 7px;
    }

    .observer-custom-dashboard-widget-number span {
        font-size: 7px;
    }

    .observer-custom-dashboard-widget-server-status > strong {
        font-size: clamp(18px, 20cqh, 28px);
        letter-spacing: .04em;
    }

    .observer-custom-dashboard-server-status-dot {
        width: 9px;
        height: 9px;
    }

    .observer-custom-dashboard-widget-status > i {
        display: none;
    }

    .observer-custom-dashboard-widget-status > span {
        font-size: 14px;
    }
}

/*
 * Altura mínima permitida pelo Builder:
 * preserva somente o que é essencial.
 */
@container observer-custom-widget (max-height: 96px) {
    .observer-custom-dashboard-widget-header {
        min-height: 27px;
        padding-inline: 6px;
    }

    .observer-custom-dashboard-widget-body {
        padding: 2px 5px;
    }

    .observer-custom-dashboard-widget-host-state > span,
    .observer-custom-dashboard-widget-number span {
        display: none;
    }

    .observer-custom-dashboard-widget-host-state {
        gap: 1px;
    }

    .observer-custom-dashboard-widget-host-state > strong {
        font-size: clamp(16px, 22cqh, 25px);
    }

    .observer-custom-dashboard-widget-last-collection > strong {
        font-size: clamp(9px, 11cqh, 14px);
    }

    .observer-custom-dashboard-widget-number strong {
        font-size: clamp(20px, 28cqh, 32px);
    }

    .observer-custom-dashboard-gauge-ring {
        width: min(76px, 48cqh, 54cqw);
    }

    .observer-custom-dashboard-threshold-badge {
        min-height: 16px;
        padding-inline: 4px;
        font-size: 6px;
    }
}

/* Tabela nunca deve expandir o widget. */
.observer-custom-dashboard-widget-table-wrap {
    min-width: 0;
    min-height: 0;
    overscroll-behavior: contain;
}

@container observer-custom-widget (max-width: 420px) {
    .observer-custom-dashboard-widget-table {
        font-size: 7px;
    }

    .observer-custom-dashboard-widget-table th,
    .observer-custom-dashboard-widget-table td {
        padding: 5px 6px;
    }
}


/*
|--------------------------------------------------------------------------
| Host state overflow guard — Phase 3.11
|--------------------------------------------------------------------------
*/

.observer-custom-dashboard-widget-host-state {
    min-width: 0;
    overflow: hidden;
}

.observer-custom-dashboard-widget-host-state > * {
    min-width: 0;
}

.observer-custom-dashboard-widget-server-status,
.observer-custom-dashboard-widget-uptime,
.observer-custom-dashboard-widget-last-collection {
    max-width: 100%;
    max-height: 100%;
}


/*
|--------------------------------------------------------------------------
| TV Mode / Fullscreen — Phase 3.17
|--------------------------------------------------------------------------
*/

body.observer-custom-dashboard-tv-active {
    overflow: hidden !important;
}

.observer-custom-dashboard-tv-exit {
    display: none;
}

.observer-custom-dashboard.is-tv-mode,
.observer-custom-dashboard:fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 12px;
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(139, 76, 255, .07),
            transparent 38%
        ),
        #080c12;
    overflow: auto;
}

.observer-custom-dashboard.is-tv-mode
    .observer-custom-dashboard-header,
.observer-custom-dashboard.is-tv-mode
    .observer-custom-dashboard-toolbar,
.observer-custom-dashboard:fullscreen
    .observer-custom-dashboard-header,
.observer-custom-dashboard:fullscreen
    .observer-custom-dashboard-toolbar {
    display: none !important;
}

.observer-custom-dashboard.is-tv-mode
    .observer-custom-dashboard-grid,
.observer-custom-dashboard:fullscreen
    .observer-custom-dashboard-grid {
    min-height: calc(100vh - 24px);
    min-height: calc(100dvh - 24px);
}

.observer-custom-dashboard.is-tv-mode
    .observer-custom-dashboard-tv-exit,
.observer-custom-dashboard:fullscreen
    .observer-custom-dashboard-tv-exit {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2147483002;
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    background: rgba(9, 13, 19, .8);
    color: rgba(225, 231, 239, .68);
    padding: 0 10px;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
    opacity: .42;
    backdrop-filter: blur(8px);
    transition:
        opacity .15s ease,
        border-color .15s ease,
        color .15s ease,
        background .15s ease;
}

.observer-custom-dashboard.is-tv-mode
    .observer-custom-dashboard-tv-exit:hover,
.observer-custom-dashboard:fullscreen
    .observer-custom-dashboard-tv-exit:hover {
    border-color: rgba(139, 76, 255, .35);
    background: rgba(16, 21, 30, .94);
    color: #f0f2f5;
    opacity: 1;
}

.observer-custom-dashboard.is-tv-mode
    .observer-custom-dashboard-error[data-visible="1"],
.observer-custom-dashboard:fullscreen
    .observer-custom-dashboard-error[data-visible="1"] {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 150px;
    z-index: 2147483001;
    margin: 0;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
}

@media (max-width: 620px) {
    .observer-custom-dashboard-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .observer-custom-dashboard-tv-exit span {
        display: none;
    }

    .observer-custom-dashboard.is-tv-mode
        .observer-custom-dashboard-tv-exit,
    .observer-custom-dashboard:fullscreen
        .observer-custom-dashboard-tv-exit {
        width: 32px;
        padding: 0;
    }
}


@media (min-width: 761px) and (max-width: 1120px) {
    .observer-custom-dashboard-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .observer-custom-dashboard-toolbar-left,
    .observer-custom-dashboard-toolbar-right {
        flex: 1 1 100%;
    }

    .observer-custom-dashboard-toolbar-right {
        justify-content: flex-end;
        margin-left: 0;
    }
}