/* =========================================================
   CARD BASE
========================================================= */

.widget-type-docker-containers .docker-container {
    border-radius: 18px;
    padding: 18px;

    min-height: 150px;
    height: auto;

    display: flex;
    flex-direction: column;
    gap: 8px;

    overflow: visible;
    position: relative;

    border: 1px solid rgba(255,255,255,0.08);

    transition: all 0.18s ease;
}

/* hover */
.widget-type-docker-containers .docker-container:hover {
    transform: translateY(-2px);
}

/* =========================================================
   TEXTO SEM CORTES
========================================================= */

.widget-type-docker-containers .docker-container * {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.35;
}

/* =========================================================
   STATUS COLORS + GLOW
========================================================= */

.widget-type-docker-containers .docker-container:has([aria-label="running"]) {
    background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(22,163,74,0.08));
    border-color: rgba(34,197,94,0.45);
    box-shadow: 0 0 18px rgba(34,197,94,0.15);
}

.widget-type-docker-containers .docker-container:has([aria-label="healthy"]) {
    background: linear-gradient(135deg, rgba(22,163,74,0.22), rgba(34,197,94,0.08));
    border-color: rgba(22,163,74,0.55);
    box-shadow: 0 0 22px rgba(22,163,74,0.20);
}

.widget-type-docker-containers .docker-container:has([aria-label="unhealthy"]) {
    background: linear-gradient(135deg, rgba(234,179,8,0.20), rgba(202,138,4,0.08));
    border-color: rgba(234,179,8,0.55);
}

.widget-type-docker-containers .docker-container:has([aria-label="restarting"]) {
    background: linear-gradient(135deg, rgba(249,115,22,0.20), rgba(194,65,12,0.08));
    border-color: rgba(249,115,22,0.55);
}

.widget-type-docker-containers .docker-container:has([aria-label="exited"]) {
    background: linear-gradient(135deg, rgba(239,68,68,0.20), rgba(127,29,29,0.08));
    border-color: rgba(239,68,68,0.60);
}

/* =========================================================
   STATUS TEXT (RUNNING / HEALTHY ETC)
========================================================= */

.widget-type-docker-containers [aria-label] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.widget-type-docker-containers [aria-label="running"]::after {
    content: "RUNNING";
    color: #22c55e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.widget-type-docker-containers [aria-label="healthy"]::after {
    content: "HEALTHY";
    color: #16a34a;
    font-size: 11px;
    font-weight: 800;
}

.widget-type-docker-containers [aria-label="unhealthy"]::after {
    content: "UNHEALTHY";
    color: #facc15;
    font-size: 11px;
    font-weight: 800;
}

.widget-type-docker-containers [aria-label="exited"]::after {
    content: "STOPPED";
    color: #ef4444;
    font-size: 11px;
    font-weight: 800;
}

/* =========================================================
   🔥 UPTIME FIX (DESTACAR E FORÇAR VISIBILIDADE)
========================================================= */

/*
O uptime já existe no HTML do Glance,
mas geralmente fica com estilo discreto.
Aqui vamos forçar visibilidade.
*/

/* qualquer elemento secundário (uptime normalmente cai aqui) */
.widget-type-docker-containers .docker-container div,
.widget-type-docker-containers .docker-container span {
    opacity: 1 !important;
    visibility: visible !important;
}

/* tentar capturar linhas secundárias (uptime / image / info) */
.widget-type-docker-containers .docker-container small,
.widget-type-docker-containers .docker-container .sub,
.widget-type-docker-containers .docker-container .description {
    font-size: 12px;
    opacity: 0.9;
    color: rgba(255,255,255,0.75);
}

/* destacar uptime visualmente quando existir */
.widget-type-docker-containers .docker-container *:contains("Up"),
.widget-type-docker-containers .docker-container *:contains("up"),
.widget-type-docker-containers .docker-container *:contains("Uptime") {
    font-weight: 700;
    color: #60a5fa;
}

/* fallback visual para “linha secundária de info” */
.widget-type-docker-containers .docker-container {
    --uptime-color: #60a5fa;
}

/* =========================================================
   GLASS EFFECT
========================================================= */

.widget-type-docker-containers .docker-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}