/* Target simulator specific styles */
body[data-page="target-sim"] {
    height: 100vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* In this app the body is a flex container; ensure the main container still
   fills available width like the other tools. */
body[data-page="target-sim"] .app-container {
    width: 100%;
}

/* status-bar, sim-controls, progress-bar/-fill/-text: see ../common.css */

/* .target-panel base is in ../common.css; this page adds a top margin. */
.target-panel {
    margin-top: 12px;
}

.target-container { 
    flex: 1; 
    position: relative; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow: hidden; 
    background: white; 
    width: 100%;
    margin: 0 auto;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

/* stats-panel: see ../common.css */

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 700px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stats-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #2c3e50;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
}

.stats-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.stats-table tr:last-child {
    border-bottom: none;
}

.stats-table td {
    padding: 6px 4px;
}

/* stat-label, stat-value, sim-disclaimer: see ../common.css */

.mouse-position-box {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 9px;
    z-index: 10;
    max-width: 100px;
    min-width: 90px;
    box-shadow: none;
}

.mouse-position-title {
    display: none;
}

.mouse-position-content {
    color: #fff;
    line-height: 1.2;
    text-align: center;
    font-family: monospace;
}

#targetCanvas { 
    width: 100%; 
    height: 100%; 
    cursor: grab; 
    touch-action: none; 
}

#targetCanvas:active { 
    cursor: grabbing; 
}

.tooltip { 
    position: absolute; 
    background: #2c3e50; 
    color: white; 
    padding: 10px; 
    border-radius: 4px; 
    font-size: 12px; 
    pointer-events: none; 
    z-index: 1000; 
    max-width: 300px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
}

.loading { 
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: rgba(0,0,0,0.8); 
    color: white; 
    padding: 20px; 
    border-radius: 8px; 
    z-index: 1000; 
}

.loading.show { 
    display: block; 
}