.output-monitor-widget {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: white;
    display: grid;
    gap: 0.5rem;
    grid-template-rows: auto /* header */
    auto /* indicator */
    auto /* status */
    auto /* toggle */
    auto; /* current */

    overflow-y: auto;
}

.output-monitor-widget.full-hitbox {
    cursor: pointer;
}

/* --- Header --- */

.output-monitor-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.output-monitor-name {
    flex: 1;
    font-size: clamp(8px, 3vh, 36px);
    font-weight: 500;
    word-break: break-word;
}

/* --- Indicator zone --- */

.output-monitor-indicator-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.output-monitor-indicator {
    width: clamp(50px, 25%, 100px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(180,180,180,.8) 0%, rgba(120,120,120,.6) 60%, rgba(80,80,80,.4) 100% );
    box-shadow: 0 0 12px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.2);
    --indicator-color: rgba(0, 229, 226, 0.95);
    --indicator-color-mid: rgba(0, 229, 226, 0.85);
    --indicator-color-dark: rgba(0, 229, 226, 0.6);
    --indicator-glow: rgba(0, 229, 226, 0.7);
}


.output-monitor-indicator.active {
    background: radial-gradient(circle, var(--indicator-color) 0%, var(--indicator-color-mid) 60%, var(--indicator-color-dark) 100%);
    box-shadow: 0 0 20px var(--indicator-glow);
}

.output-monitor-indicator.unavailable {
    opacity: 0.4;
    box-shadow: none;
}

.output-monitor-status-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(8px, 2vh, 24px);
/*    font-weight: 600;*/
    text-transform: uppercase;
}

.output-monitor-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.output-monitor-current {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    font-size: clamp(8px, 2vh, 20px);
    padding-top: 0.25vh;
}

.output-monitor-current-label {
    opacity: 0.7;
}

.output-monitor-current-value {
    font-variant-numeric: tabular-nums;
/*    font-weight: 600;*/
}

.template-panel .widget-template.output-monitor {
    aspect-ratio: var(--template-aspect);
    padding: clamp(0.55rem, 1.6vw, 0.95rem);
}

.template-panel .widget-template.output-monitor .template-content {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: stretch;
    overflow: hidden;
}

.template-panel .widget-template.output-monitor .template-content > * {
     width: 100%;
     height: 100%;
}

    .template-panel .widget-template.output-monitor .output-monitor-indicator {
        width: clamp(50px, 25%, 100px);
    }

.template-panel .widget-template.output-monitor .output-monitor-widget {
     padding: clamp(0.65rem, 1.8vw, 1rem);
     gap: clamp(0.45rem, 1.5vw, 0.8rem);
     overflow: hidden;
}

.template-panel .widget-template.output-monitor.existing-template .output-monitor-widget {
    overflow-y: auto;
}

    .template-panel .widget-template.output-monitor.existing-template .output-monitor-widget .output-monitor-indicator {
        width: clamp(50px, 25%, 100px);
    }


.template-panel .widget-template.output-monitor .output-monitor-name,
.template-panel .widget-template.output-monitor .output-monitor-status-text,
.template-panel .widget-template.output-monitor .output-monitor-current {
    font-size: 1.25rem;
}

@media (max-width: 699px) {
    .template-panel .widget-template.output-monitor .output-monitor-name,
    .template-panel .widget-template.output-monitor .output-monitor-status-text,
    .template-panel .widget-template.output-monitor .output-monitor-current {
        font-size: 0.95rem;
    }
}

@media (min-width: 881px) and (max-width: 1150px) {
    .template-panel .widget-template.output-monitor .output-monitor-name,
    .template-panel .widget-template.output-monitor .output-monitor-status-text,
    .template-panel .widget-template.output-monitor .output-monitor-current {
        font-size: 0.95rem;
    }
}

@media (min-width: 1151px) and (max-width: 1600px) {
    .template-panel .widget-template.output-monitor .output-monitor-name,
    .template-panel .widget-template.output-monitor .output-monitor-status-text,
    .template-panel .widget-template.output-monitor .output-monitor-current {
        font-size: 0.95rem;
    }
}

@media (min-width: 2880px) {
    .template-panel .widget-template.output-monitor .output-monitor-name,
    .template-panel .widget-template.output-monitor .output-monitor-status-text,
    .template-panel .widget-template.output-monitor .output-monitor-current {
        font-size: 2rem;
    }
}

@media (min-width: 1000px) and (max-height: 650px) {
    .output-monitor-indicator-wrapper {
        max-height: 42%;
    }
}

@media (width: 1024px) and (height: 600px) {
    .output-monitor-indicator-wrapper {
        max-height: 42%;
    }
}