@import "Theme.scss";

DebugOverlay {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 380px;
    flex-direction: column;
    gap: 10px;
    pointer-events: all; // Permet de cliquer sur les boutons
    font-family: sans-serif;
    color: $color-text-main;

    .header-bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid $bg-panel-border;
        padding-bottom: 8px;
        margin-bottom: 8px;

        .title {
            font-size: 14px;
            font-weight: 800;
            color: $color-accent;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .target-nav {
            flex-direction: row;
            gap: 6px;

            button {
                background-color: $bg-item;
                border: 1px solid $bg-panel-border;
                color: $color-text-main;
                padding: 4px 10px;
                border-radius: 4px;
                font-size: 11px;
                cursor: pointer;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.15);
                }
            }
        }
    }

    .section-title {
        font-size: 11px;
        font-weight: 700;
        color: $color-text-dim;
        text-transform: uppercase;
        margin-top: 6px;
        margin-bottom: 4px;
    }

    .data-row {
        flex-direction: row;
        justify-content: space-between;
        padding: 3px 0;
        font-size: 12px;

        .label {
            color: $color-text-dim;
        }

        .value {
            font-family: monospace;
            font-weight: 600;
        }
    }
}